/* Küchenanwalt 0.3: additive Darstellung; KI-Layout bleibt separat. */
:root{--primary-color:#5e6c4b;--accent-color:#c8ad7c}
body{background:#f6f3ed;color:#30372c;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
header{min-height:280px;background-color:#59664d!important}header .header-grid{min-height:260px}
header .logo{max-width:min(440px,85vw);height:auto;object-fit:contain}
.header-btn,.submit-btn{background:#536744!important;color:white!important;border-radius:7px}
nav,.nav-container{background:#4e5c42!important}
main.container{max-width:1160px;background:#fffdf9;border-radius:16px;padding:clamp(24px,4vw,60px);box-shadow:0 16px 45px rgba(38,43,30,.08);margin-top:32px;margin-bottom:36px}
.ka-intro{max-width:880px;margin:0 auto;text-align:center;padding:24px 0 40px}
.ka-eyebrow{color:#78815d;font-size:.79rem;font-weight:750;letter-spacing:.19em}
.ka-intro h1{font-size:clamp(2.1rem,5vw,4rem);line-height:1.14;color:#374431;letter-spacing:-.04em;margin:.55em 0 .4em}
.ka-lead{font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.7;color:#53594d}
.ka-cta{display:inline-block;background:#536744;color:#fff!important;text-decoration:none;border-radius:7px;padding:12px 22px;margin:8px 5px;font-weight:650}
.ka-cta-outline{background:transparent;border:1px solid #536744;color:#536744!important}
.ka-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:8px 0 45px}
.ka-topic{background:#f4f1e9;border:1px solid #e8e2d5;padding:26px;border-radius:12px;min-width:0}
.ka-topic h2{color:#3e5038;font-size:1.4rem;margin:12px 0}
.ka-topic p{line-height:1.65}.ka-topic a,.ka-inner-page a{color:#4b6040}
.ka-number{color:#a58b5d;font-size:.9rem;letter-spacing:.1em;font-weight:800}
.ka-inner-page{min-height:300px}.ka-inner-page section{max-width:850px;margin:auto}.ka-inner-page h1{color:#3e5038;font-size:clamp(2rem,4vw,3rem)}
.ka-note{border-left:3px solid #b7a57f;padding:12px 16px;background:#f7f3eb}
@media(max-width:760px){.ka-topics{grid-template-columns:1fr}main.container{padding:20px;margin-top:15px}header{min-height:180px}header .header-grid{min-height:160px}}

/* Version 0.4: composited hero with independently editable elements */
.ka-hero{position:relative;isolation:isolate;min-height:clamp(510px,36vw,740px);overflow:hidden;background:#e9dfce;color:#444a4d;display:flex;align-items:center;justify-content:flex-end;padding:48px clamp(22px,5.3vw,105px) 110px}
.ka-hero-photo{position:absolute;inset:0;background:url('/bilder/hero-kueche.jpg') center left / cover no-repeat;z-index:-2}
.ka-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,246,236,0) 24%,rgba(250,248,242,.26) 40%,rgba(255,255,255,.91) 58%,rgba(255,255,255,.68) 100%);z-index:-1}
.ka-hero-content{width:min(48%,840px);margin-left:auto;position:relative;z-index:1}
.ka-hero h1{font-size:clamp(36px,4.1vw,82px);line-height:1.05;letter-spacing:-.045em;color:#4a4e50;margin:0 0 20px;font-weight:760}
.ka-hero h1 span{display:block}.ka-hero h1 span::first-letter{color:inherit}
.ka-hero-description{font-size:clamp(17px,1.45vw,28px);line-height:1.35;font-weight:570;margin:0 0 28px;color:#4e5458}
.ka-hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.ka-hero-button{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:16px 22px;border-radius:18px;font-size:clamp(14px,1.15vw,22px);font-weight:650;text-decoration:none!important;box-shadow:0 5px 14px #3332;flex:1;white-space:nowrap}
.ka-hero-primary{background:#4c5b22;color:#fff!important}.ka-hero-secondary{background:#fff;color:#4c5b22!important;border:1px solid #abb18f}.ka-hero-disabled{opacity:.6;cursor:not-allowed}
.ka-hero-benefits{list-style:none;display:flex;flex-wrap:wrap;gap:15px 28px;margin:32px 0 0;padding:0;color:#50585a;font-weight:650;font-size:clamp(13px,1vw,18px)}
.ka-hero-benefits li{display:flex;align-items:center;gap:9px}.ka-hero-benefits li span{border:3px solid #53672b;color:#53672b;border-radius:50%;width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;font-size:19px;font-weight:bold}
.ka-hero-logo{position:absolute;bottom:16px;left:clamp(20px,2vw,48px);z-index:2;width:clamp(210px,25vw,490px)}.ka-hero-logo img{display:block;width:100%;height:auto}
@media(max-width:950px){.ka-hero{padding:50px 26px 130px;min-height:600px}.ka-hero-content{width:min(64%,620px)}.ka-hero-overlay{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.92) 45%,rgba(255,255,255,.84))}.ka-hero-button{min-height:58px}}
@media(max-width:650px){.ka-hero{min-height:730px;align-items:flex-end;padding:230px 18px 125px}.ka-hero-photo{background-position:35% top;background-size:auto 65%;background-color:#eee8dc}.ka-hero-overlay{background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.15) 23%,rgba(255,255,255,.96) 43%,#fff 100%)}.ka-hero-content{width:100%}.ka-hero h1{font-size:clamp(32px,9vw,48px)}.ka-hero-actions{flex-direction:column;gap:10px}.ka-hero-button{min-height:54px}.ka-hero-benefits{gap:10px 18px;margin-top:18px}.ka-hero-logo{width:205px;bottom:12px;left:18px}}

/* Version 0.5: Desktop-Header mit Referenzproportion 2048:748 (2,738:1).
   Hintergrund, Logo, Text und CTAs bleiben eigenständige DOM-Ebenen. */
@media (min-width: 1100px) {
  .ka-hero {
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 2048 / 748;
    min-height: 0;
    height: auto;
    padding: 2.1% 4.1% 3.2% 0;
    align-items: center;
    justify-content: flex-end;
  }
  .ka-hero-photo { background-position: left center; }
  .ka-hero-content { width: 48%; max-width: none; margin-left: auto; }
  .ka-hero h1 { font-size: clamp(35px, 3.35vw, 72px); margin-bottom: clamp(8px, 1.15vw, 22px); }
  .ka-hero-description { font-size: clamp(15px, 1.22vw, 26px); margin-bottom: clamp(12px, 1.4vw, 29px); }
  .ka-hero-actions { gap: clamp(8px, .85vw, 18px); flex-wrap: nowrap; }
  .ka-hero-button { min-height: 0; padding: clamp(10px, 1vw, 21px) clamp(10px, 1.05vw, 23px); font-size: clamp(12px, .98vw, 21px); border-radius: clamp(10px, .8vw, 17px); gap: clamp(5px, .55vw, 12px); }
  .ka-hero-benefits { margin-top: clamp(10px, 1.65vw, 34px); gap: 8px clamp(10px, 1.3vw, 28px); font-size: clamp(11px, .87vw, 18px); }
  .ka-hero-benefits li span { width: clamp(20px, 1.45vw, 30px); height: clamp(20px, 1.45vw, 30px); font-size: clamp(13px, .9vw, 19px); border-width: 2px; }
  .ka-hero-logo { left: 1.8%; bottom: 2.2%; width: 23.5%; max-width: none; }
}
/* Bei schmaleren Viewports ist Lesbarkeit wichtiger als ein starres Seitenverhältnis. */
@media (min-width: 951px) and (max-width: 1099px) {
  .ka-hero { min-height: 440px; padding-bottom: 95px; }
  .ka-hero-content { width: 52%; }
  .ka-hero h1 { font-size: clamp(36px, 4vw, 48px); }
  .ka-hero-actions { gap: 8px; }
  .ka-hero-button { min-height: 52px; padding: 10px; font-size: 13px; gap: 6px; }
}

/* 0.6: Proportionsgebundener Referenz-Header. Keine Bild-Buttons und kein Bild-Logo.
   Das verwendete Hintergrundmotiv ist eine bereinigte Teilaufnahme aus 0.5,
   NICHT die unretuschierte Originalgrafik mit eingebrannten Bedienelementen. */
@media (min-width:1100px) {
  .ka-hero { aspect-ratio:2048/748; min-height:0; padding:0; display:block; }
  .ka-hero-photo { background-size:auto 100%; background-position:left center; }
  .ka-hero-overlay { background:linear-gradient(90deg,transparent 34%,rgba(255,255,255,.55) 49%,rgba(255,255,255,.85) 64%,rgba(255,255,255,.62) 100%); }
  .ka-hero-content { position:absolute; top:19.2%; left:53%; right:6.2%; width:auto; max-width:none; margin:0; }
  .ka-hero h1 { font-size:clamp(32px,3.9vw,82px); line-height:1.02; letter-spacing:-.04em; margin:0 0 2.5%; }
  .ka-hero-description { font-size:clamp(14px,1.32vw,29px); line-height:1.3; margin:0 0 4%; }
  .ka-hero-actions { display:grid; grid-template-columns:1.3fr 1fr; gap:2.5%; flex-wrap:nowrap; }
  .ka-hero-button { display:flex; min-width:0; min-height:0; padding:5% 6%; font-size:clamp(12px,1.04vw,23px); border-radius:17px; gap:5px; }
  .ka-hero-benefits { margin-top:5%; display:flex; justify-content:space-between; gap:1.5%; font-size:clamp(10px,.89vw,19px); flex-wrap:nowrap; }
  .ka-hero-benefits li { white-space:nowrap; gap:7px; }
  .ka-hero-logo { position:absolute; left:1.6%; bottom:2.4%; width:24%; max-width:none; }
}
.ka-hero-button:focus-visible,.ka-hero-logo:focus-visible { outline:3px solid #bd873a; outline-offset:4px; }
@media (max-width:1099px) { .ka-hero-content { z-index:1; } }


/* 0.7 – Kundenmotiv als getrennte Foto- und Logoebene; Referenz 2048 x 748.
   Das Foto stammt unverändert aus dem linken Bildfeld der gelieferten Vorlage.
   Keine eingebrannten Schriftzüge oder Schaltflächen. */
.ka-hero { background:#f6f1e8; }
.ka-hero-photo { background-image:url('/bilder/hero-kueche-original.jpg'); background-repeat:no-repeat; }
.ka-hero-logo img { width:100%;height:auto;display:block; }
@media (min-width:1100px) {
 .ka-hero { aspect-ratio:2048/748; }
 .ka-hero-photo { background-size:67.58% 100%;background-position:left center; }
 .ka-hero-overlay { background:linear-gradient(90deg, transparent 29%, rgba(255,255,255,.04) 38%, rgba(255,255,255,.64) 50%, rgba(255,255,255,.90) 67%, rgba(255,255,255,.68) 100%); }
 .ka-hero-content { top:19.8%;left:53%;right:6.3%; }
 .ka-hero-logo { left:1.6%;bottom:2.2%;width:24%; }
}
@media (min-width:651px) and (max-width:1099px) {
 .ka-hero-photo { background-size:auto 100%;background-position:left center; }
 .ka-hero-logo { width:min(29%,320px); }
}
@media (max-width:650px) {
 .ka-hero-photo { background-size:auto 65%;background-position:35% top; }
 .ka-hero-logo { width:205px; }
}

/* Version 0.8: durchgehendes Küchenfoto über die gesamte Hero-Breite.
   Text, CTA-Links und Logo bleiben separate, zugängliche Elemente. */
.ka-hero-photo {
  background-image: url('/bilder/hero-kueche-v08.jpg');
  background-size: cover;
  background-position: center center;
}
@media (min-width:1100px) {
  .ka-hero-photo { background-size:cover; background-position:center center; }
  .ka-hero-overlay {
    background:linear-gradient(90deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.75) 54%,rgba(255,255,255,.60) 100%);
  }
}
@media (max-width:1099px) and (min-width:651px) {
  .ka-hero-photo { background-size:cover; background-position:35% center; }
}
@media (max-width:650px) {
  .ka-hero-photo { background-size:auto 65%; background-position:32% top; }
}

/* Version 0.9 – dezente Referenztypografie und zurückgenommenes Logo.
   Die vorherigen Regeln bleiben aus Kompatibilitätsgründen erhalten;
   diese spezifischen Overrides gelten zuletzt. */
.ka-hero h1 {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.15;
  color: #414a49;
}
.ka-hero-description { font-weight: 400; line-height: 1.48; }
.ka-hero-logo { width: clamp(165px, 18vw, 340px); }
.ka-hero-logo img { width: 100%; height: auto; }
@media (min-width:1100px) {
  .ka-hero-content { top: 20%; left: 53%; right: 6.3%; }
  .ka-hero h1 { font-size: clamp(32px, 2.65vw, 57px); line-height: 1.16; font-weight: 400; letter-spacing: -.02em; margin-bottom: 3.1%; }
  .ka-hero-description { font-size: clamp(14px, 1.2vw, 25px); font-weight: 400; }
  .ka-hero-logo { left: 2.0%; bottom: 2.4%; width: 17%; max-width: none; }
  .ka-hero-button { font-weight: 550; }
}
@media (min-width:651px) and (max-width:1099px) {
  .ka-hero h1 { font-size: clamp(31px, 3.5vw, 43px); font-weight: 400; }
  .ka-hero-logo { width: clamp(160px, 21vw, 235px); left: 2%; bottom: 2%; }
}
@media (max-width:650px) {
  .ka-hero h1 { font-size: clamp(29px, 7.5vw, 40px); font-weight: 400; line-height: 1.18; }
  .ka-hero-logo { width: clamp(145px, 39vw, 190px); left: 16px; bottom: 10px; }
}

/* 0.10: Präzise an die gelieferten Referenzhälften (links.png, rechts.png) angepasst.
   Desktop links die freigegebene Bildhälfte einschließlich original positioniertem Logo.
   Rechts bleiben Texte/Buttons echte HTML-Elemente. */
.ka-hero h1 em {font-style:normal;color:#535e26}
@media (min-width:1100px) {
  .ka-hero {aspect-ratio:1958/735; height:auto; min-height:0; background:#f6f3eb}
  .ka-hero-photo {background-image:url('/bilder/hero-links-referenz.png');background-size:51.74% 100%;background-position:left center;background-repeat:no-repeat}
  .ka-hero-overlay {background:linear-gradient(90deg,transparent 0%,transparent 49%,rgba(255,255,255,.76) 55%,rgba(255,255,255,.52) 80%,rgba(255,255,255,.38) 100%)}
  .ka-hero-content {top:19.4%;left:55.5%;right:3.1%;width:auto}
  .ka-hero h1 {font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;font-size:clamp(43px,4.38vw,92px);line-height:.96;font-weight:400;letter-spacing:-.038em;color:#57595b;margin:0 0 2.4%}
  .ka-hero h1 .ka-headline-second {display:block;white-space:nowrap}
  .ka-hero-description {font-size:clamp(17px,1.35vw,28px);font-weight:450;line-height:1.36;color:#5a5d60;margin:0 0 4.2%}
  .ka-hero-actions {grid-template-columns:1.32fr .98fr;gap:2.5%}
  .ka-hero-button {border-radius:clamp(14px,1.05vw,22px);padding:5.2% 5%;font-size:clamp(15px,1.24vw,26px);font-weight:450;box-shadow:0 4px 12px #0002}
  .ka-hero-primary {background:#535e26}.ka-hero-secondary{color:#535e26!important;border:1px solid #eee9dc}
  .ka-hero-benefits {margin-top:4.8%;gap:1.5%;font-size:clamp(12px,1.05vw,22px);font-weight:500;color:#565b5e}
  .ka-hero-benefits li {gap:9px}
  .ka-hero-benefits li span {width:clamp(22px,1.9vw,40px);height:clamp(22px,1.9vw,40px);border-width:2px;color:#535e26;border-color:#535e26;font-size:clamp(16px,1.3vw,27px)}
  .ka-hero-logo {display:none} /* Logo ist bereits exakt in der freigegebenen linken Referenzhälfte */
}
@media (min-width:651px) and (max-width:1099px) {
  .ka-hero h1 em {color:#535e26}
  .ka-hero h1 {font-weight:400;color:#57595b}
}
@media (max-width:650px) {
  .ka-hero h1 {color:#57595b;font-weight:400}
}

/* Version 0.11 – Desktop: die ZWEI freigegebenen Kundengrafiken direkt,
   ohne Nachzeichnen, Fontsynthese, künstliche Farbverläufe oder CSS-Rekonstruktion.
   Mobile: bisherige semantische HTML-Elemente und editierbare CMS-Texte. */
.ka-hero-approved,.ka-hero-approved-links{display:none}
@media (min-width:1100px){
  .ka-hero{aspect-ratio:1958/735!important;height:auto!important;min-height:0!important;padding:0!important;display:block!important;overflow:hidden}
  .ka-hero-approved{display:flex;position:absolute;inset:0;z-index:1;width:100%;height:100%}
  .ka-hero-approved img{display:block;height:100%;object-fit:fill;min-width:0}
  .ka-hero-approved-left{width:51.73646578%}
  .ka-hero-approved-right{width:48.26353422%}
  .ka-hero-photo,.ka-hero-overlay,.ka-hero-content,.ka-hero-logo{display:none!important}
  .ka-hero-approved-links{display:block;position:absolute;inset:0;z-index:2}
  .ka-hero-approved-links a{display:block;position:absolute;top:58.96%;height:12.45%;border-radius:18px;text-decoration:none}
  .ka-hero-approved-primary{left:55.46%;width:24.00%}
  .ka-hero-approved-secondary{left:80.60%;width:17.82%}
  .ka-hero-approved-links a:focus-visible{outline:4px solid #1c482b;outline-offset:2px}
}

/* 0.12: durchgehendes Einzelbild; keine sichtbare Bildhälften-Naht. */
@media (min-width:1100px) {
 .ka-hero {aspect-ratio:1958/750!important;}
 .ka-hero-approved {display:block!important;}
 .ka-hero-approved-single {width:100%!important;height:100%!important;object-fit:fill!important;display:block!important;}
 .ka-hero-approved-links a {top:60.7%;height:11.0%;}
 .ka-hero-approved-primary {left:53.3%;width:21.9%;}
 .ka-hero-approved-secondary {left:76.4%;width:17.2%;}
}
/* Mobil bleiben Inhalte als HTML erhalten; feine Typografie. */
@media (max-width:1099px) {
 .ka-hero h1 {font-weight:300!important;letter-spacing:-.025em!important;}
 .ka-hero-description {font-weight:350!important;}
}

/* 0.17 – Korrektur fuer die TATSAECHLICHEN Kuechenanwalt-Teaser (.ka-topics/.ka-topic).
   CMS-Bilder koennen als img, figure, picture oder in einem HTML-Wrapper vorkommen. */
.ka-topics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; width:100%; }
.ka-topics > *, .ka-topic, .ka-topic > *, .ka-topic figure, .ka-topic picture { min-width:0; max-width:100%; box-sizing:border-box; }
.ka-topic img, .ka-topics > img, .ka-topics > figure img, .ka-topics > picture img {
  display:block; width:100%; max-width:100%; height:180px; max-height:180px;
  object-fit:cover; object-position:center; border-radius:8px; box-sizing:border-box;
}
.ka-topic figure {margin:0 0 16px;}
.ka-topic img {margin-bottom:16px;}
@media (max-width:900px) and (min-width:641px) { .ka-topics {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px) { .ka-topics {grid-template-columns:minmax(0,1fr);} }


/* 0.18: Bild wird innerhalb einer echten dreispaltigen .ka-topics-Grid ausgegeben. */
.ka-topics > article.ka-topic { min-width:0; width:auto; }
.ka-topics .ka-topic img { display:block; width:100%; max-width:100%; height:auto; aspect-ratio:1 / 1; max-height:none; object-fit:cover; }
.ka-topics .ka-topic > br { display:none; }

/* 0.20: sechs und mehr einzelne CMS-Teaserkarten in einem gemeinsamen Raster. */
.ka-topics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
.ka-topics > article.ka-topic { min-width:0; width:100%; box-sizing:border-box; }
@media (max-width:900px) and (min-width:641px) { .ka-topics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .ka-topics { grid-template-columns:minmax(0,1fr); } }

/* 0.21: Desktop drei Karten, Tablet zwei, Mobil eine. */
@media (min-width:761px){.ka-topics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:541px) and (max-width:760px){.ka-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.ka-topics{grid-template-columns:minmax(0,1fr)}}