:root{
  --rf-green:#0E3D2E;
  --rf-green-hover:#114937;
  --rf-green-active:#0B3125;
  --rf-graphite:#252A28;
  --rf-muted:#69726D;
  --rf-warm:#F7F5F0;
  --rf-white:#FFFFFF;
  --rf-line:#DCE3DF;

  --rf-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --rf-h1:clamp(2.5rem,3.5vw,3.25rem);
  --rf-h2:clamp(1.875rem,2.5vw,2.375rem);
  --rf-h3:clamp(1.375rem,1.8vw,1.625rem);
  --rf-lead:clamp(1.125rem,1.35vw,1.25rem);
  --rf-body:clamp(1rem,1.1vw,1.0625rem);

  --rf-container:1180px;
  --rf-gutter:48px;
  --rf-gap:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--rf-font);
  color:var(--rf-graphite);
  background:var(--rf-white);
}
a{text-decoration:none;color:inherit}
.container{
  width:min(var(--rf-container),calc(100% - 2 * var(--rf-gutter)));
  margin-inline:auto;
}
.grid12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--rf-gap);
}

.internal{
  background:var(--rf-green);
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:8px 0;
}
.internal .container{
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(220,227,223,.85);
}
.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--rf-green);
  font-size:19px;
  font-weight:600;
  letter-spacing:.018em;
  white-space:nowrap;
}
.logo{
  width:36px;
  height:32px;
  position:relative;
  flex:0 0 auto;
}
.logo i,.logo:before,.logo:after{
  content:"";
  position:absolute;
  width:17px;
  height:15px;
  background:var(--rf-green);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.logo i{left:10px;top:0;transform:rotate(180deg)}
.logo:before{left:0;bottom:0}
.logo:after{right:0;bottom:0}
.menu{
  display:flex;
  gap:22px;
  font-size:14px;
  font-weight:500;
}
.menu a:hover{color:var(--rf-green)}

.hero-wrap{padding-top:14px}
.hero{
  background:var(--rf-warm);
  border-radius:18px;
  padding:64px 0;
  overflow:hidden;
}
.hero-inner{
  width:calc(100% - 2 * 52px);
  margin-inline:auto;
}
.hero-copy{grid-column:1/span 8}
.hero-visual{
  grid-column:9/span 4;
  min-height:370px;
  border-radius:18px;
  background:rgba(14,61,46,.10);
  position:relative;
  overflow:hidden;
}
.hero-visual:before,
.hero-visual:after{
  content:"";
  position:absolute;
  width:180px;
  height:155px;
  background:rgba(14,61,46,.18);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.hero-visual:before{left:34px;top:48px}
.hero-visual:after{right:34px;bottom:48px;transform:rotate(180deg)}

.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--rf-green);
  margin-bottom:18px;
}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:var(--rf-h1);
  line-height:1.08;
  letter-spacing:-.026em;
  font-weight:600;
  color:var(--rf-green);
  max-width:22ch;
  margin-bottom:20px;
}
h2{
  font-size:var(--rf-h2);
  line-height:1.14;
  letter-spacing:-.018em;
  font-weight:600;
  color:var(--rf-green);
  margin-bottom:20px;
}
h3{
  font-size:var(--rf-h3);
  line-height:1.22;
  font-weight:600;
  color:var(--rf-green);
  margin-bottom:14px;
}
.role{
  color:var(--rf-green);
  font-size:15px;
  line-height:1.45;
  font-weight:500;
  margin-bottom:24px;
}
.lead{
  font-size:var(--rf-lead);
  line-height:1.5;
  max-width:64ch;
  margin-bottom:0;
}
.body{
  font-size:var(--rf-body);
  line-height:1.62;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  padding:13px 18px;
  border-radius:9px;
  background:var(--rf-green);
  color:#fff;
  font-size:15px;
  font-weight:600;
}
.btn:hover{background:var(--rf-green-hover)}
.btn:active{background:var(--rf-green-active)}
.textlink{
  color:var(--rf-green);
  font-weight:600;
  font-size:15px;
}

.section{padding:96px 0}
.section-compact{padding:72px 0}
.section-warm{background:var(--rf-warm)}

.statement{
  min-height:310px;
  display:flex;
  align-items:center;
}
.statement-title{grid-column:1/span 5}
.statement-copy{
  grid-column:7/span 6;
  max-width:68ch;
}
.statement-copy p{margin-bottom:22px}

.situation-list{
  margin:28px 0 26px;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.situation-list li{
  position:relative;
  padding:20px 22px;
  border-radius:14px;
  background:rgba(14,61,46,.06);
  font-size:16px;
  line-height:1.52;
  min-height:116px;
}
.situation-list li strong{
  display:block;
  color:var(--rf-green);
  font-weight:600;
  margin-bottom:6px;
}
.keyline{
  margin-top:30px;
  font-size:18px;
  line-height:1.5;
  font-weight:500;
  color:var(--rf-green);
  max-width:65ch;
}

.section-head{
  max-width:700px;
  margin-bottom:38px;
}
.section-head p{
  font-size:var(--rf-body);
  line-height:1.62;
  color:var(--rf-muted);
}

.cards3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.card{
  border:1px solid var(--rf-line);
  border-radius:16px;
  padding:30px;
  background:#fff;
  min-height:320px;
  display:flex;
  flex-direction:column;
}
.card .kicker{
  font-size:12px;
  letter-spacing:.055em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--rf-green);
  margin-bottom:18px;
}
.card p{
  font-size:16px;
  line-height:1.6;
  margin-bottom:22px;
}
.tags{
  color:var(--rf-muted);
  font-size:13px;
  line-height:1.5;
  margin-top:auto;
  padding-top:10px;
}
.card .textlink{margin-top:20px}

.cards2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.collab-card{
  border:1px solid var(--rf-line);
  border-radius:16px;
  padding:32px;
}
.collab-card p{
  font-size:16px;
  line-height:1.62;
}

.work-intro{
  max-width:76ch;
  margin-bottom:34px;
}
.process-panel{
  background:var(--rf-white);
  border:1px solid var(--rf-line);
  border-radius:18px;
  padding:30px;
}
.process{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}
.process-step{
  background:rgba(14,61,46,.06);
  border-radius:14px;
  padding:22px 18px;
}
.process-step b{
  display:block;
  color:var(--rf-green);
  font-size:12px;
  letter-spacing:.04em;
  margin-bottom:8px;
}
.process-step span{
  font-size:15px;
  font-weight:500;
}
.process-note{
  margin-top:28px;
  padding:20px 22px;
  border-radius:14px;
  background:rgba(14,61,46,.06);
  max-width:78ch;
}
.process-note p{
  margin:0;
  font-size:16px;
  line-height:1.62;
}
.signature{
  margin-top:48px;
  padding:34px 36px;
  border-left:4px solid var(--rf-green);
  background:var(--rf-warm);
}
.signature-kicker{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.055em;
  color:var(--rf-green);
  margin-bottom:12px;
}
.signature strong{
  display:block;
  font-size:clamp(1.5rem,2vw,1.85rem);
  line-height:1.25;
  color:var(--rf-green);
  font-weight:600;
  margin-bottom:16px;
}
.signature p{
  margin:0 0 18px;
  font-size:16px;
  line-height:1.62;
  max-width:74ch;
}

.experience-grid{
  display:grid;
  grid-template-columns:5fr 1fr 6fr;
}
.experience-title{grid-column:1}
.experience-copy{grid-column:3}
.experience-copy > p{
  font-size:var(--rf-body);
  line-height:1.62;
}
.experience-access{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:26px 0 24px;
}
.experience-access-card{
  border:1px solid var(--rf-line);
  border-radius:15px;
  padding:24px;
  background:rgba(14,61,46,.045);
  min-height:210px;
  display:flex;
  flex-direction:column;
}
.experience-access-card .mini-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--rf-green);
  margin-bottom:12px;
}
.experience-access-card h3{
  font-size:20px;
  line-height:1.25;
  margin-bottom:12px;
}
.experience-access-card p{
  font-size:15px;
  line-height:1.55;
  margin-bottom:18px;
  color:var(--rf-graphite);
}
.experience-access-card .textlink{margin-top:auto}

/* Startseiten-Erweiterung v02: echtes Portrait im vorhandenen Über-Marco-Teaser */
.about-grid-photo{
  display:grid;
  grid-template-columns:3fr 4.5fr 3.2fr;
  gap:36px;
  align-items:center;
}
.about-title{grid-column:auto}
.about-copy{grid-column:auto}
.about-copy p{
  font-size:var(--rf-body);
  line-height:1.62;
}
.about-photo{
  margin:0;
  width:100%;
  aspect-ratio:4/5;
  border-radius:18px;
  overflow:hidden;
  background:rgba(14,61,46,.08);
  border:1px solid rgba(14,61,46,.10);
}
.about-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 34%;
}

.contact{
  background:var(--rf-green);
  color:#fff;
  border-radius:18px;
  padding:56px;
}
.contact h2{color:#fff}
.contact p{
  max-width:70ch;
  font-size:18px;
  line-height:1.6;
}
.contact-eyebrow{color:#fff}
.contact-options{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.contact-options span{
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:9px 13px;
  font-size:14px;
}
.contact .btn{
  background:#fff;
  color:var(--rf-green);
}
.contact .btn:hover{background:#f1f4f2}

footer{
  padding:36px 0 50px;
  color:var(--rf-muted);
  font-size:13px;
  line-height:1.5;
}

@media(max-width:1199px){
  :root{
    --rf-gutter:32px;
    --rf-gap:20px;
  }
  .grid12{grid-template-columns:repeat(8,minmax(0,1fr))}
  .menu{gap:16px;font-size:13px}
  .hero{padding:52px 0}
  .hero-inner{width:calc(100% - 2 * 36px)}
  .hero-copy{grid-column:1/-1}
  .hero-visual{
    grid-column:1/-1;
    min-height:190px;
    margin-top:30px;
  }
  h1{max-width:none}
  .statement-title{grid-column:1/span 3}
  .statement-copy{grid-column:4/span 5}
  .cards3{grid-template-columns:1fr 1fr}
  .cards3 .card:last-child{grid-column:1/-1}
  .process{grid-template-columns:1fr 1fr}
  .process-step:last-child{grid-column:1/-1}
  .section{padding:72px 0}
  .statement{min-height:250px}
  .experience-grid{grid-template-columns:3fr .7fr 4.3fr}
  .about-grid-photo{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
  .about-title{grid-column:1/-1}
  .about-photo{max-width:380px}
}

@media(max-width:767px){
  :root{
    --rf-gutter:20px;
    --rf-gap:16px;
  }
  .internal .container span:last-child{display:none}
  .nav{min-height:68px}
  .menu{display:none}
  .hero-wrap{padding-top:0}
  .hero{border-radius:0;padding:44px 0}
  .hero-inner{width:calc(100% - 2 * 20px)}
  .hero-visual{min-height:160px;margin-top:28px}
  .section,.section-compact{padding:56px 0}
  .statement{min-height:auto}
  .statement-title,.statement-copy{grid-column:1/-1}
  .statement-copy{margin-top:28px}
  .situation-list{grid-template-columns:1fr}
  .cards3,.cards2,.process{grid-template-columns:1fr}
  .cards3 .card:last-child,.process-step:last-child{grid-column:auto}
  .experience-grid{display:block}
  .experience-copy{margin-top:26px}
  .experience-access{grid-template-columns:1fr}
  .about-grid-photo{display:block}
  .about-copy{margin-top:26px}
  .about-photo{
    margin-top:30px;
    max-width:none;
    aspect-ratio:4/5;
  }
  .contact{border-radius:0;padding:42px 20px}
  .contact-wrap{width:100%}
}


/* =========================================================
   STAGING v03 – gemeinsame Seitenfamilie aus 080-Artefakten
   ========================================================= */
.menu a[aria-current="page"]{
  color:var(--rf-green);
  text-decoration:underline;
  text-underline-offset:7px;
  text-decoration-thickness:1px;
}

.page-hero-wrap{padding-top:14px}
.page-hero{
  background:var(--rf-warm);
  border-radius:18px;
  padding:64px 52px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
  align-items:stretch;
}
.page-hero > div:first-child{align-self:center}
.page-hero h1{max-width:24ch}
.page-hero .hero-visual{grid-column:auto;min-height:350px;margin:0}
.page-hero-photo{grid-template-columns:1.8fr 1fr;align-items:center}
.role-line{
  margin-top:22px;
  color:var(--rf-green);
  font-size:15px;
  font-weight:500;
}
.hero-photo-real{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  min-height:390px;
  background:rgba(14,61,46,.08);
}
.hero-photo-real img{
  display:block;
  width:100%;
  height:100%;
  min-height:390px;
  object-fit:cover;
  object-position:50% 34%;
}

.topic-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.topic-card{
  border:1px solid var(--rf-line);
  border-radius:18px;
  padding:30px 26px;
  background:#fff;
  display:flex;
  flex-direction:column;
}
.topic-label,.kicker{
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--rf-green);
  margin-bottom:12px;
}
.topic-card h3{font-size:25px;min-height:3.7em}
.topic-card p{font-size:15px;line-height:1.6}
.topic-meta{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--rf-line);
}
.topic-meta strong{display:block;color:var(--rf-green);font-size:13px;margin-bottom:6px}
.topic-meta span{font-size:13px;line-height:1.45;color:var(--rf-muted)}
.topic-card .textlink{margin-top:auto;padding-top:22px}

.split-standard{
  display:grid;
  grid-template-columns:5fr 1fr 6fr;
  align-items:start;
}
.split-standard > :first-child{grid-column:1}
.split-standard > :last-child{grid-column:3}

.focus-box,.plain-box{
  border-radius:18px;
  padding:30px 32px;
}
.focus-box{background:rgba(14,61,46,.10)}
.plain-box{border:1px solid var(--rf-line);background:#fff;margin-top:16px}
.focus-box strong,.plain-box strong{
  display:block;
  color:var(--rf-green);
  font-size:23px;
  line-height:1.35;
  margin-bottom:10px;
}
.focus-box p,.plain-box p{margin:0;font-size:16px;line-height:1.6}
.spaced{margin-top:30px}

.example-list{display:grid;gap:10px;margin-top:18px}
.example{
  border:1px solid rgba(14,61,46,.12);
  border-radius:12px;
  padding:14px 16px;
  background:rgba(255,255,255,.64);
  font-size:14px;
  line-height:1.48;
}
.example b{color:var(--rf-green)}

.stack-list{display:grid;gap:12px;margin-top:18px}
.stack-list > div{
  background:rgba(14,61,46,.055);
  border-radius:13px;
  padding:16px 18px;
  font-size:15px;
  line-height:1.52;
}
.stack-list strong{display:block;color:var(--rf-green);margin-bottom:4px}
.stack-list span{display:block}

.cards4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.mini-panel{
  background:rgba(14,61,46,.055);
  border-radius:16px;
  padding:26px 22px;
  min-height:250px;
}
.mini-panel b{
  display:block;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--rf-green);
  margin-bottom:12px;
}
.mini-panel h3{font-size:21px;margin-bottom:12px}
.mini-panel p{margin:0;font-size:15px;line-height:1.58}

.answer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}
.answer-grid > div{
  border:1px solid var(--rf-line);
  border-radius:14px;
  padding:20px;
  font-size:15px;
  line-height:1.55;
}
.answer-grid b{display:block;color:var(--rf-green);margin-bottom:7px}
.answer-grid span{display:block}

.flowline{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:0 0 26px;
}
.flowline span{
  padding:10px 13px;
  border-radius:999px;
  background:rgba(14,61,46,.07);
  color:var(--rf-green);
  font-size:14px;
  font-weight:500;
}
.flowline i{font-style:normal;color:var(--rf-muted)}

.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.tag-cloud span{
  border:1px solid var(--rf-line);
  border-radius:999px;
  padding:9px 12px;
  font-size:13px;
  color:var(--rf-green);
  background:#fff;
}

.key-difference{
  margin-top:30px;
  padding:34px 38px;
  border-radius:18px;
  background:rgba(14,61,46,.10);
}
.key-difference strong{
  display:block;
  color:var(--rf-green);
  font-size:28px;
  line-height:1.35;
  max-width:1000px;
}

.wide-head{max-width:1120px}
.logic-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.logic-grid article{
  border:1px solid var(--rf-line);
  border-radius:16px;
  padding:24px 20px;
  background:#fff;
}
.logic-grid b{display:block;color:var(--rf-green);font-size:12px;margin-bottom:10px}
.logic-grid h3{font-size:20px}
.logic-grid p{font-size:14px;line-height:1.55;margin-bottom:0}

.platform-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.platform-grid article{
  border:1px solid var(--rf-line);
  border-radius:16px;
  padding:26px 22px;
  background:#fff;
}
.platform-grid h3{font-size:20px}
.platform-grid p{font-size:15px;line-height:1.58;margin-bottom:0}

.case-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.case-card{
  border:1px solid var(--rf-line);
  border-radius:18px;
  padding:30px;
  background:#fff;
}
.case-card p{font-size:16px;line-height:1.62}

.timeline-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.timeline-grid article{
  border:1px solid var(--rf-line);
  border-radius:16px;
  padding:26px 22px;
}
.timeline-grid b{display:block;color:var(--rf-green);font-size:12px;margin-bottom:10px}
.timeline-grid h3{font-size:20px}
.timeline-grid p{font-size:15px;line-height:1.58;margin-bottom:0}
.compact-signature{margin-top:26px}
.compact-signature strong{margin-bottom:0}

.placeholder-note{
  margin-top:20px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(14,61,46,.06);
  color:var(--rf-muted);
  font-size:13px;
  line-height:1.5;
}
.form-preview{
  border:1px solid var(--rf-line);
  border-radius:18px;
  padding:30px 28px;
  background:#fff;
}
.form-row{margin-bottom:16px}
.form-row label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--rf-green);
  margin-bottom:8px;
}
.fake-input,.fake-textarea{
  border:1px solid var(--rf-line);
  border-radius:10px;
  padding:12px 13px;
  min-height:44px;
  color:var(--rf-muted);
  background:#fff;
  font-size:14px;
}
.fake-textarea{min-height:150px}
.disabled-btn{opacity:.55;cursor:not-allowed;border:0}

@media(max-width:1199px){
  .page-hero,.page-hero-photo{grid-template-columns:1fr;padding:52px 36px}
  .page-hero .hero-visual{min-height:190px;margin-top:10px}
  .hero-photo-real{max-width:440px;min-height:auto}
  .hero-photo-real img{min-height:auto}
  .topic-grid,.cards4,.platform-grid,.timeline-grid{grid-template-columns:1fr 1fr}
  .topic-card h3{min-height:auto}
  .split-standard{grid-template-columns:3fr .7fr 4.3fr}
  .logic-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:767px){
  .page-hero-wrap{padding-top:0}
  .page-hero,.page-hero-photo{
    border-radius:0;
    padding:44px 20px;
  }
  .page-hero h1{max-width:none}
  .topic-grid,.cards4,.answer-grid,.platform-grid,.case-grid,.timeline-grid,.logic-grid{grid-template-columns:1fr}
  .split-standard{display:block}
  .split-standard > :last-child{margin-top:28px}
  .hero-photo-real{max-width:none;margin-top:12px}
  .key-difference{padding:28px 22px}
  .key-difference strong{font-size:23px}
}


/* === STAGING v04 · Korrekturrunde 01 === */
h1,h2,h3,.signature strong,.key-difference strong{ text-wrap:balance; }
p,.body,.lead{ text-wrap:pretty; }

.hero h1{ font-size:clamp(2.35rem,3.1vw,3rem); }

/* 080-Mini-Markenanker originalnäher; finales Produktions-SVG bleibt separat offen */
.logo{ width:34px; height:30px; }
.logo i,.logo:before,.logo:after{ width:16px; height:14px; }
.logo i{ left:9px; top:0; }
.logo:before{ left:0; bottom:0; }
.logo:after{ right:0; bottom:0; }

/* Themen-Untermenü */
.desktop-menu{ align-items:center; }
.topics-menu{ position:relative; }
.topics-menu>summary{ list-style:none; cursor:pointer; font-weight:500; }
.topics-menu>summary::-webkit-details-marker{ display:none; }
.topics-menu>summary::after{ content:"▾"; margin-left:6px; font-size:.72em; color:var(--rf-muted); }
.topics-menu>summary.active-main{
  color:var(--rf-green); text-decoration:underline;
  text-underline-offset:7px; text-decoration-thickness:1px;
}
.submenu{
  position:absolute; z-index:60; top:calc(100% + 14px); left:-18px;
  width:365px; padding:10px; background:#fff; border:1px solid var(--rf-line);
  border-radius:14px; box-shadow:0 18px 42px rgba(14,61,46,.13);
}
.submenu::before{ content:""; position:absolute; left:0; right:0; top:-15px; height:15px; }
.submenu a{
  display:block; padding:11px 12px; border-radius:9px;
  font-size:14px; line-height:1.35; text-decoration:none !important;
}
.submenu a:hover,.submenu a:focus-visible{ background:rgba(14,61,46,.06); }
.submenu a[aria-current="page"]{
  background:rgba(14,61,46,.10); color:var(--rf-green); font-weight:600;
}
.mobile-menu{ display:none; }

/* Boxen heben sich immer vom Hintergrund ab */
.card,.collab-card,.logic-grid article,.platform-grid article,
.timeline-grid article,.topic-card,.form-preview{
  background:rgba(14,61,46,.045);
}
.section-warm .card,.section-warm .collab-card,
.section-warm .logic-grid article,.section-warm .platform-grid article,
.section-warm .timeline-grid article,.section-warm .topic-card,
.section-warm .case-card{ background:#fff; }

/* Umbrüche / Lesefluss */
.section-head{ max-width:850px; }
.process-step span{ white-space:nowrap; }
.process-note{ max-width:none; width:100%; }

/* Über Marco: direkte Textabsätze auf derselben Leseskala */
.page-hero-photo .lead,.page-hero-photo .body{
  font-size:var(--rf-body); line-height:1.62; max-width:68ch;
}
.page-hero-photo .lead{ margin-bottom:18px; }

@media(max-width:1199px){ .submenu{ width:330px; } }

@media(max-width:767px){
  .desktop-menu{ display:none; }
  .mobile-menu{ display:block; position:relative; }
  .mobile-menu>summary{
    list-style:none; cursor:pointer; border:1px solid var(--rf-line);
    border-radius:9px; padding:9px 12px; color:var(--rf-green);
    font-size:14px; font-weight:600;
  }
  .mobile-menu>summary::-webkit-details-marker{ display:none; }
  .mobile-menu-panel{
    position:absolute; z-index:80; right:0; top:calc(100% + 8px);
    width:min(360px,calc(100vw - 40px)); background:#fff;
    border:1px solid var(--rf-line); border-radius:14px;
    box-shadow:0 18px 42px rgba(14,61,46,.15); padding:10px;
  }
  .mobile-menu-panel>a,.mobile-topics>summary,.mobile-submenu a{
    display:block; padding:11px 12px; border-radius:9px;
    font-size:14px; line-height:1.35; text-decoration:none;
  }
  .mobile-topics>summary{
    list-style:none; cursor:pointer; color:var(--rf-green); font-weight:600;
  }
  .mobile-topics>summary::-webkit-details-marker{ display:none; }
  .mobile-submenu{
    padding-left:10px; border-left:2px solid rgba(14,61,46,.10);
    margin:2px 0 6px 10px;
  }
  .mobile-menu-panel a[aria-current="page"]{
    background:rgba(14,61,46,.10); color:var(--rf-green); font-weight:600;
  }
  .process-step span{ white-space:normal; }
}


/* =========================================================
   STAGING v05 · Korrekturrunde 02
   ========================================================= */

:root{
  --rf-deep-forest:#173735;
  --rf-pine:#356254;
  --rf-sage:#94A99F;
}

/* Themen: integrierte zweite Menüzeile statt Dropdown */
.topics-menu,.submenu{display:none !important;}

.topic-subnav{
  background:#fff;
  border-top:1px solid rgba(220,227,223,.72);
  border-bottom:1px solid rgba(220,227,223,.9);
}
.topic-subnav .container{
  min-height:48px;
  display:flex;
  align-items:center;
}
.topic-subnav nav{
  width:100%;
  display:flex;
  align-items:center;
  gap:28px;
}
.topic-subnav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:48px;
  color:var(--rf-graphite);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
}
.topic-subnav a:hover,
.topic-subnav a:focus-visible{
  color:var(--rf-green);
}
.topic-subnav a[aria-current="page"]{
  color:var(--rf-green);
  font-weight:600;
}
.topic-subnav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--rf-green);
}

/* Große Abschluss-/Kontaktflächen eine Stufe heller */
.contact{
  background:var(--rf-pine);
}

/* Verwandte Entscheidungsboxen: Tonwert statt Weiß-Kontrast */
.plain-box{
  background:rgba(14,61,46,.045);
  border-color:rgba(14,61,46,.13);
}

/* Kontrollierte Desktop-Umbrüche */
.desktop-break{display:block;}
.controlled-headline{max-width:none;}

/* Start: 50/50-Aufteilung gibt der zweizeiligen Überschrift genug Raum */
.statement-title{
  grid-column:1/span 6;
}
.statement-copy{
  grid-column:7/span 6;
}

/* Boxbeschriftungen dürfen sauber auf max. zwei Zeilen umbrechen */
.process-step span{
  white-space:normal !important;
  line-height:1.28;
}
.controlled-process .process-step{
  min-height:86px;
}

/* Zwischenüberschriften: eine Zeile bevorzugt, sonst kontrolliert zweizeilig */
.section-head{
  max-width:980px;
}
.section-head h2{
  max-width:34ch;
}

/* Fachliche Signatur: ruhigere Textbreite */
.signature strong{
  max-width:42ch;
}
.signature p{
  max-width:78ch;
}

/* Hero = Box / Inhalt = Fläche / Kontakt = Box bleibt bewusstes Seitensystem */
.page-hero,
.hero{
  border:1px solid rgba(14,61,46,.035);
}
.contact{
  border:1px solid rgba(255,255,255,.08);
}

/* In v04 war das Theme-Dropdown mobil verschachtelt.
   v05 nutzt auch mobil die integrierte Unterleiste. */
@media(max-width:1199px){
  .topic-subnav nav{
    gap:20px;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  .topic-subnav a{
    white-space:nowrap;
  }
}

@media(max-width:767px){
  .desktop-break{display:none;}
  .statement-title,.statement-copy{
    grid-column:1/-1;
  }
  .topic-subnav .container{
    width:100%;
    padding-left:20px;
    padding-right:20px;
  }
  .topic-subnav nav{
    gap:18px;
  }
  .topic-subnav a{
    font-size:12.5px;
  }
}


/* =========================================================
   STAGING v06 · Korrekturrunde 03
   ========================================================= */

/* Themen-Unterleiste: als integrierte, zentrierte Menüzeile */
.topic-subnav .container{
  justify-content:center;
}
.topic-subnav nav{
  width:auto;
  justify-content:center;
  gap:34px;
}

/* Themenkarten: untere Inhaltsbereiche sauber auf gleiche Höhe setzen */
.topic-card{
  display:flex;
  flex-direction:column;
}
.topic-card > p{
  margin-bottom:18px;
}
.topic-meta.aligned-meta{
  margin-top:auto;
  min-height:112px;
}
.topic-card .textlink{
  margin-top:14px;
  min-height:40px;
}

/* Projektintegration: verwandte Entscheidungsboxen in benachbarten Farbtönen */
.answer-grid > .decision-tone-light{
  background:#F7EBE9; /* sehr heller Mist-/Warmton */
  border-color:rgba(53,98,84,.12);
}
.answer-grid > .decision-tone-strong{
  background:rgba(148,169,159,.28); /* heller Sage-Ton */
  border-color:rgba(53,98,84,.14);
}

/* Einzelne ausgewählte Überschriften auf Desktop bewusst einzeilig */
.desktop-single-line{
  white-space:nowrap;
  max-width:none !important;
}

/* Arbeitsweise: Fachliche Signatur offen, ohne Boxcharakter */
.signature.signature-open{
  background:transparent;
  padding:18px 0 8px 34px;
  border-left:4px solid var(--rf-green);
  border-radius:0;
}
.signature.signature-open strong{
  margin-bottom:14px;
}
.signature.signature-open p{
  margin-bottom:0;
}

/* Erfahrung: Fachliche Tiefe als zwei gleichwertige Boxen */
.experience-depth-grid .depth-card{
  min-height:220px;
}
.experience-depth-grid .depth-card h3{
  margin-bottom:14px;
}

/* Kontakt-/Abschlussflächen: vollständig in die Farbwelt integrieren */
.contact{
  background:var(--rf-sage);
  color:var(--rf-deep-forest);
  border-color:rgba(23,55,53,.10);
}
.contact h2,
.contact .contact-eyebrow{
  color:var(--rf-deep-forest);
}
.contact p{
  color:var(--rf-deep-forest);
}
.contact-options span{
  border-color:rgba(23,55,53,.28);
  color:var(--rf-deep-forest);
  background:rgba(255,255,255,.18);
}
.contact .btn{
  background:var(--rf-deep-forest);
  color:#fff;
}
.contact .btn:hover{
  background:var(--rf-pine);
}

/* Desktop-Feinregel: einzeilige Überschriften dürfen etwas kompakter werden,
   bevor ein Umbruch nötig wird. */
@media(min-width:1200px){
  .desktop-single-line{
    font-size:clamp(1.9rem,2.25vw,2.25rem);
  }
}

/* Mobil / Tablet: wieder normal umbrechen */
@media(max-width:1199px){
  .desktop-single-line{
    white-space:normal;
  }
  .topic-subnav nav{
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
  }
  .topic-meta.aligned-meta{
    min-height:auto;
  }
}


/* =========================================================
   STAGING v07 · Feinschliff
   ========================================================= */

/* Projektintegration:
   "Wenn ja" und "Wenn nein" bewusst neutral und gleichwertig behandeln. */
.answer-grid > .decision-tone-neutral{
  background:rgba(148,169,159,.20);
  border-color:rgba(53,98,84,.13);
}

/* Zusammenarbeit:
   kompakte Zusammenfassung statt plakativer Großschrift. */
.key-difference.compact-difference{
  padding:30px 38px;
}
.compact-difference .difference-line{
  margin:0;
  max-width:980px;
  color:var(--rf-green);
  font-size:clamp(1.2rem,1.55vw,1.45rem);
  line-height:1.45;
  font-weight:600;
}
.compact-difference .difference-line + .difference-line{
  margin-top:18px;
}

@media(max-width:767px){
  .key-difference.compact-difference{
    padding:26px 22px;
  }
  .compact-difference .difference-line{
    font-size:1.12rem;
  }
}


/* =========================================================
   STAGING v08 · Bildwelt + visuelle Integration
   Basis: v07, Inhalte/Seitenlogik bleiben grundsätzlich erhalten.
   ========================================================= */

:root{
  --rf-deep-forest:#173735;
  --rf-pine:#356254;
  --rf-sage:#94A99F;
  --rf-soft-sage:#E6EDE9;
  --rf-soft-sage-2:#F0F4F2;
  --rf-green:var(--rf-deep-forest);
  --rf-green-hover:var(--rf-pine);
  --rf-green-active:#102E2B;
}

/* Navigation: Kontakt als klarer, aber kompakter CTA */
.desktop-menu .nav-cta{
  background:var(--rf-deep-forest);
  color:#fff !important;
  border-radius:999px;
  padding:9px 14px;
  text-decoration:none !important;
  margin-top:-9px;
  margin-bottom:-9px;
}
.desktop-menu .nav-cta:hover{background:var(--rf-pine)}
.desktop-menu .nav-cta[aria-current="page"]{
  background:var(--rf-pine);
  color:#fff !important;
}

/* Heroes: Text + Bild/visuelle Logik als zusammenhängende Komposition */
.hero,
.page-hero{
  background:linear-gradient(135deg,#FBFAF7 0%,#F7F5F0 64%,#F1F5F3 100%);
  border-color:rgba(23,55,53,.08);
  box-shadow:0 12px 34px rgba(23,55,53,.045);
}
.hero{
  padding:0;
}
.hero-inner{
  width:100%;
  gap:0;
  align-items:stretch;
}
.hero-copy{
  grid-column:1/span 6;
  padding:58px 32px 58px 52px;
  align-self:center;
}
.page-hero{
  grid-template-columns:1.05fr 1fr;
  padding:0;
  gap:0;
  overflow:hidden;
}
.page-hero > div:first-child{
  padding:52px;
}
.page-hero h1{max-width:21ch}

/* Real image slots */
.hero-media{
  margin:0;
  min-height:455px;
  overflow:hidden;
  background:var(--rf-soft-sage);
}
.hero-inner .hero-media{
  grid-column:7/span 6;
  border-radius:0 18px 18px 0;
}
.page-hero > .hero-media{
  border-radius:0 18px 18px 0;
}
.hero-media img{
  width:100%;
  height:100%;
  min-height:455px;
  display:block;
  object-fit:cover;
}
.hero-media-start img{object-position:53% 50%}
.hero-media-themen img{object-position:49% 50%}
.hero-media-projekt img{object-position:43% 50%}
.hero-media-digital img{object-position:51% 50%}
.hero-media-fmea img{object-position:55% 48%}
.hero-media-kontakt img{object-position:50% 37%}

/* Bestehendes Hauptportrait */
.page-hero-photo{
  grid-template-columns:1.25fr .82fr;
  gap:0;
  padding:0;
  overflow:hidden;
}
.hero-photo-real{
  min-height:455px;
  border-radius:0 18px 18px 0;
  border:0;
}
.hero-photo-real img{
  min-height:455px;
  object-position:50% 34%;
}

/* Nutzen-/Situationskarten: leichter, visueller, mit kleinen Icon-Flächen */
.situation-list{
  gap:14px;
}
.situation-list li{
  min-height:132px;
  padding:18px 20px;
  background:#fff;
  border:1px solid rgba(23,55,53,.10);
  box-shadow:0 7px 20px rgba(23,55,53,.035);
}
.mini-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--rf-soft-sage);
  color:var(--rf-deep-forest);
  font-weight:600;
  margin-bottom:13px;
}
.situation-list li:nth-child(2n) .mini-icon{
  background:rgba(148,169,159,.26);
}

/* Cards: weniger Formular-/Rahmenoptik, mehr zusammenhängende Bildsprache */
.card,
.topic-card,
.collab-card,
.experience-access-card,
.case-card,
.platform-grid article,
.timeline-grid article,
.logic-grid article{
  border-color:rgba(23,55,53,.11);
  box-shadow:0 8px 24px rgba(23,55,53,.035);
}
.card,
.topic-card,
.experience-access-card{
  background:linear-gradient(180deg,#fff 0%,#FBFCFB 100%);
}
.section-warm{
  background:#F7F7F4;
}

/* Kleine Akzentlogik für Themenkarten */
.topic-card{
  position:relative;
  overflow:hidden;
}
.topic-card::before{
  content:"";
  display:block;
  width:42px;
  height:5px;
  border-radius:999px;
  background:var(--rf-sage);
  margin-bottom:18px;
}
.topic-card:nth-child(2)::before{background:var(--rf-pine)}
.topic-card:nth-child(3)::before{background:var(--rf-deep-forest)}

/* Contact als integrierte, helle Abschlussfläche statt dunklem Block */
.contact{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#E2EAE6 0%,#D7E3DD 100%);
  color:var(--rf-deep-forest);
  border:1px solid rgba(23,55,53,.10);
  box-shadow:0 12px 30px rgba(23,55,53,.045);
}
.contact::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-120px;
  top:-120px;
  border-radius:50%;
  border:34px solid rgba(255,255,255,.34);
  pointer-events:none;
}
.contact h2,
.contact p,
.contact .contact-eyebrow{color:var(--rf-deep-forest)}
.contact-options span{
  background:rgba(255,255,255,.34);
  border-color:rgba(23,55,53,.20);
}
.contact .btn{
  position:relative;
  z-index:1;
  background:var(--rf-deep-forest);
  color:#fff;
}
.contact .btn:hover{background:var(--rf-pine)}

/* Seiten ohne zusätzliches Personenmotiv: gezielte Inhaltsgrafiken statt Platzhalter */
.hero-graphic{
  min-height:455px;
  border-radius:0 18px 18px 0;
  background:linear-gradient(145deg,#EFF4F1 0%,#DDE7E2 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px;
  overflow:hidden;
}
.hero-graphic-collab{
  flex-direction:column;
  gap:16px;
}
.hero-graphic-card{
  width:min(100%,330px);
  padding:24px 26px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(23,55,53,.12);
  box-shadow:0 8px 20px rgba(23,55,53,.04);
}
.hero-graphic-card span{
  display:inline-grid;
  place-items:center;
  width:30px;height:30px;
  border-radius:9px;
  background:var(--rf-deep-forest);
  color:#fff;
  font-size:12px;font-weight:600;
  margin-bottom:12px;
}
.hero-graphic-card strong{
  display:block;
  color:var(--rf-deep-forest);
  font-size:20px;
  margin-bottom:5px;
}
.hero-graphic-card small{color:var(--rf-muted)}
.hero-graphic-or{
  color:var(--rf-muted);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero-graphic-work{
  flex-direction:column;
  gap:12px;
}
.hero-graphic-work > div{
  width:min(100%,330px);
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  align-items:center;
  padding:14px 18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(23,55,53,.10);
  border-radius:14px;
}
.hero-graphic-work span{
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:10px;
  background:rgba(148,169,159,.35);
  color:var(--rf-deep-forest);
  font-size:12px;font-weight:600;
}
.hero-graphic-work b{color:var(--rf-deep-forest);font-weight:600}

.hero-graphic-exp{
  position:relative;
}
.exp-ring{
  width:155px;height:155px;
  border-radius:50%;
  position:absolute;
  display:grid;
  place-items:center;
  border:24px solid rgba(53,98,84,.18);
  color:var(--rf-deep-forest);
  font-weight:600;
  background:rgba(255,255,255,.34);
}
.exp-ring-a{transform:translate(-62px,-54px)}
.exp-ring-b{transform:translate(62px,-54px);border-color:rgba(148,169,159,.40)}
.exp-ring-c{transform:translate(0,58px);border-color:rgba(23,55,53,.20)}

/* Arbeitsweise: Icon-Box-Charakter der fünf Schritte verstärken */
.process-step{
  border:1px solid rgba(23,55,53,.08);
  background:#fff;
}
.process-step b{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:9px;
  background:var(--rf-soft-sage);
}

/* Fachliche Signatur bleibt offen und flächig integriert */
.signature.signature-open{
  border-left-color:var(--rf-pine);
}

/* Bilder nie als Lightbox-/Zoom-Element behandeln */
.hero-media img,
.hero-photo-real img,
.about-photo img{
  cursor:default;
  user-select:none;
}

/* Responsive */
@media(max-width:1199px){
  .hero-copy{
    grid-column:1/-1;
    padding:48px 36px 20px;
  }
  .hero-inner .hero-media{
    grid-column:1/-1;
    border-radius:0 0 18px 18px;
    min-height:330px;
  }
  .page-hero,
  .page-hero-photo{
    grid-template-columns:1fr;
  }
  .page-hero > div:first-child{padding:44px 36px 30px}
  .page-hero > .hero-media,
  .hero-photo-real,
  .hero-graphic{
    border-radius:0 0 18px 18px;
    min-height:330px;
  }
  .hero-media img,
  .hero-photo-real img{min-height:330px}
}

@media(max-width:767px){
  .hero,
  .page-hero,
  .page-hero-photo{
    border-radius:0;
  }
  .hero-copy{padding:38px 20px 18px}
  .page-hero > div:first-child{padding:38px 20px 24px}
  .hero-inner .hero-media,
  .page-hero > .hero-media,
  .hero-photo-real,
  .hero-graphic{
    border-radius:0;
    min-height:260px;
  }
  .hero-media img,
  .hero-photo-real img{min-height:260px}
  .desktop-menu .nav-cta{padding:0;background:transparent;color:inherit !important}
}


/* =========================================================
   STAGING v09 · Arbeitsstand Schritt 2 + 3
   Schritt 2: finales Logo im Header
   Schritt 3: Start-Hero darf niemals in den Bildbereich laufen
   Noch KEINE allgemeine Typografie-Verkleinerung (folgt in Schritt 4).
   ========================================================= */
.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.brand-logo{
  display:block;
  width:184px;
  height:auto;
  max-height:48px;
}

/* Robustheitskorrektur für die Textspalte im Start-Hero */
.hero-copy{
  min-width:0;
}
.hero-copy h1{
  max-width:100%;
  hyphens:manual;
  overflow-wrap:break-word;
}

@media(max-width:767px){
  .brand-logo{width:164px;max-height:44px}
}

/* =========================================================
   STAGING v09 · Schritt 4
   Typografie moderat beruhigt, um zu frühe Umbrüche zu reduzieren.
   Keine strukturelle Änderung der Bildpositionen.
   ========================================================= */
:root{
  --rf-h1:clamp(2.18rem,3.0vw,2.88rem);
  --rf-h2:clamp(1.72rem,2.2vw,2.16rem);
  --rf-h3:clamp(1.28rem,1.6vw,1.52rem);
  --rf-lead:clamp(1.06rem,1.20vw,1.16rem);
  --rf-body:clamp(.98rem,1.0vw,1.02rem);
}

/* Etwas mehr nutzbare Textbreite im Hero, ohne das Foto zu verschieben. */
.hero-copy{
  padding-left:46px;
  padding-right:24px;
}
.page-hero > div:first-child{
  padding-left:46px;
  padding-right:34px;
}

/* Überschriften weniger plakatig, weiterhin klar hierarchisch. */
h1{
  line-height:1.10;
  letter-spacing:-.022em;
}
.page-hero h1{
  max-width:23ch;
}

/* Desktop-Fließtext minimal ruhiger; kein generelles „Kleinskalieren“. */
.lead{line-height:1.52}
.body{line-height:1.60}

@media(max-width:1199px){
  .hero-copy{padding:44px 32px 20px}
  .page-hero > div:first-child{padding:42px 32px 28px}
}

@media(max-width:767px){
  :root{
    --rf-h1:clamp(2.0rem,8.5vw,2.45rem);
    --rf-h2:clamp(1.6rem,6.6vw,2.0rem);
    --rf-lead:1.05rem;
    --rf-body:1rem;
  }
  .hero-copy{padding:36px 20px 18px}
  .page-hero > div:first-child{padding:36px 20px 24px}
}


/* =========================================================
   STAGING v09 · Schritt 5
   Freigegebene Hero-Bilder B07–B10 integriert.
   ========================================================= */
.hero-media-zusammenarbeit img{object-position:50% 47%}
.hero-media-arbeitsweise img{object-position:51% 43%}
.hero-media-erfahrung img{object-position:50% 44%}
.hero-media-projektintegration img{object-position:51% 48%}


/* =========================================================
   STAGING v09 · Desktop-Bereinigung nach Gesamtcheck
   S1: keine künstliche Trennung "Verantwortungs-bereiche"
   K1: Kontakt bleibt auch im aktiven Zustand ein Pill-CTA
   ========================================================= */

/* Nur die Startseiten-Heroheadline minimal kompakter:
   Bildposition und 50/50-Hero bleiben unverändert. */
.hero .hero-copy h1{
  font-size:clamp(2.18rem,2.72vw,2.52rem);
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* Aktiver Kontakt-CTA bleibt als Button sichtbar. */
.desktop-menu .nav-cta[aria-current="page"]{
  background:var(--rf-pine);
  color:#fff !important;
  text-decoration:none !important;
}


/* =========================================================
   STAGING v09 · Mobil M2
   Start-Hero: langes Wort ohne künstliche Trennung.
   Nur auf Smartphone-Breiten lokal kleiner.
   ========================================================= */
@media(max-width:767px){
  .hero .hero-copy h1{
    font-size:1.68rem;
    line-height:1.12;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
}


/* =========================================================
   STAGING v09 · Mobil M4
   Themen-Unterleiste: alle drei Zugänge auf Smartphone sichtbar.
   Kein horizontales Scrollen; 2 + 1 Anordnung.
   ========================================================= */
@media(max-width:767px){
  .topic-subnav .container{
    padding:6px 16px;
  }

  .topic-subnav nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:0 12px;
    overflow:visible;
    justify-content:stretch;
    align-items:stretch;
  }

  .topic-subnav a{
    min-height:42px;
    padding:7px 3px;
    white-space:normal;
    text-align:center;
    justify-content:center;
    line-height:1.22;
    font-size:12px;
  }

  .topic-subnav a:nth-child(3){
    grid-column:1 / -1;
  }
}


/* =========================================================
   STAGING v09 · Mobil M5
   360px-Belastungstest: nur die Start-Heroheadline auf sehr kleinen
   Smartphones kompakter. 390px und Desktop bleiben unverändert.
   ========================================================= */
@media(max-width:380px){
  .hero-title-start{
    font-size:1.55rem !important;
    line-height:1.12;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
}


/* =========================================================
   STAGING v09 · Tablet T1
   Hauptnavigation: kompakte Menü-Schaltfläche bis 959px.
   Desktop-Navigation erst ab 960px.
   ========================================================= */
@media(min-width:768px) and (max-width:959px){
  .desktop-menu{
    display:none;
  }

  .mobile-menu{
    display:block;
    position:relative;
  }

  .mobile-menu>summary{
    list-style:none;
    cursor:pointer;
    border:1px solid var(--rf-line);
    border-radius:9px;
    padding:9px 12px;
    color:var(--rf-green);
    font-size:14px;
    font-weight:600;
  }

  .mobile-menu>summary::-webkit-details-marker{
    display:none;
  }

  .mobile-menu-panel{
    position:absolute;
    z-index:80;
    right:0;
    top:calc(100% + 8px);
    width:min(360px,calc(100vw - 40px));
    background:#fff;
    border:1px solid var(--rf-line);
    border-radius:14px;
    box-shadow:0 18px 42px rgba(14,61,46,.15);
    padding:10px;
  }

  .mobile-menu-panel>a,
  .mobile-topics>summary,
  .mobile-submenu a{
    display:block;
    padding:11px 12px;
    border-radius:9px;
    font-size:14px;
    line-height:1.35;
    text-decoration:none;
  }

  .mobile-topics>summary{
    list-style:none;
    cursor:pointer;
    color:var(--rf-green);
    font-weight:600;
  }

  .mobile-topics>summary::-webkit-details-marker{
    display:none;
  }

  .mobile-submenu{
    padding-left:10px;
    border-left:2px solid rgba(14,61,46,.10);
    margin:2px 0 6px 10px;
  }

  .mobile-menu-panel a[aria-current="page"]{
    background:rgba(14,61,46,.10);
    color:var(--rf-green);
    font-weight:600;
  }
}


/* =========================================================
   RC03 – Rechtstexte und Footer-Verlinkung
   ========================================================= */
.footer-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.footer-links{
  display:flex;
  gap:10px;
  white-space:nowrap;
}
.footer-links a{
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-links a:hover{color:var(--rf-green)}

.legal-section{padding-top:72px}
.legal-wrap{max-width:860px}
.legal-wrap > h1{margin-bottom:42px}
.legal-block{
  padding:28px 0;
  border-top:1px solid var(--rf-line);
}
.legal-block h2{
  margin:0 0 14px;
  font-size:clamp(1.25rem,1.8vw,1.55rem);
}
.legal-block p{
  max-width:78ch;
  margin:0 0 14px;
  line-height:1.7;
}
.legal-block p:last-child{margin-bottom:0}
.legal-meta{color:var(--rf-muted)}
.legal-warning{margin:0 0 34px}

@media(max-width:767px){
  .footer-row{display:block}
  .footer-links{margin-top:12px}
  .legal-section{padding-top:46px}
  .legal-wrap > h1{margin-bottom:30px}
  .legal-block{padding:24px 0}
}


/* =========================================================
   STAGING v09 · RC07
   Smartphone-Header nach Systemfont-Wechsel stabilisieren.
   Verhindert ein Überlaufen der Menü-Schaltfläche am rechten Rand.
   ========================================================= */
@media(max-width:767px){
  .nav{
    gap:16px;
  }

  .brand{
    min-width:0;
    flex:0 1 auto;
  }

  .brand-logo{
    width:min(164px,50vw);
  }

  .mobile-menu{
    flex:0 0 auto;
    width:auto;
    max-width:max-content;
    margin-left:auto;
  }

  .mobile-menu>summary{
    white-space:nowrap;
  }
}


/* =========================================================
   STAGING v09 · RC10 – technische Robustheit / Accessibility
   ========================================================= */
html{
  scroll-padding-top:96px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid currentColor;
  outline-offset:3px;
}

@media(max-width:767px){
  html{scroll-padding-top:88px}
}

/* =========================================================
   POST-LAUNCH AI v02 PREVIEW
   AI-Bildkennzeichnung als dezentes Overlay.
   Die ursprüngliche Bildgeometrie der Heroes bleibt unverändert.
   ========================================================= */
.ai-figure{position:relative}
.ai-image-note{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  max-width:calc(100% - 24px);
  margin:0;
  padding:7px 10px;
  border:1px solid rgba(23,55,53,.12);
  border-radius:8px;
  background:rgba(247,245,240,.92);
  color:var(--rf-deep-forest);
  font-size:11.5px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:.005em;
  box-shadow:0 2px 10px rgba(23,55,53,.08);
}
.ai-positioning-copy h3{
  margin:0 0 14px;
  color:var(--rf-deep-forest);
  font-size:25px;
  line-height:1.25;
}
.ai-positioning-copy p{
  margin:0;
  max-width:58ch;
  font-size:16px;
  line-height:1.68;
}
.ai-positioning-copy p + p{margin-top:18px}
.ai-role p + p{margin-top:16px}
.ai-principle{
  max-width:92ch;
  margin:30px 0 0;
  padding-top:20px;
  border-top:1px solid var(--rf-line);
  color:var(--rf-text);
  font-size:16px;
  line-height:1.62;
}
.ai-principle strong{color:var(--rf-deep-forest)}

@media(max-width:767px){
  .ai-image-note{
    left:10px;
    right:10px;
    bottom:10px;
    max-width:none;
    width:auto;
    padding:6px 8px;
    font-size:11px;
  }
  .ai-positioning-copy h3{font-size:22px}
  .ai-principle{margin-top:24px;padding-top:18px}
}

/* RISIKOFELDER · Kontaktformular v01 */
.contact-method-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:20px;
  align-items:start;
}
.contact-direct,.contact-form-card{
  background:#fff;
  border:1px solid var(--rf-line);
  border-radius:16px;
  padding:32px;
}
.contact-direct-note{
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid var(--rf-line);
}
.contact-direct-note strong{
  display:block;
  color:var(--rf-green);
  margin-bottom:8px;
}
.contact-direct-note p{margin-bottom:0}
.contact-form-card h3{margin-bottom:10px}
.form-intro{
  color:var(--rf-muted);
  font-size:14px;
  margin-bottom:24px;
}
.form-field{margin-bottom:18px}
.form-field label{
  display:block;
  color:var(--rf-green);
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
}
.form-field label span{
  color:var(--rf-muted);
  font-weight:400;
}
.form-field input,.form-field textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #cbd4cf;
  border-radius:10px;
  background:#fff;
  color:var(--rf-graphite);
  font:inherit;
  font-size:16px;
  line-height:1.45;
  padding:12px 13px;
}
.form-field textarea{
  min-height:170px;
  resize:vertical;
}
.form-field input:focus,.form-field textarea:focus{
  outline:3px solid rgba(14,61,46,.14);
  outline-offset:2px;
  border-color:var(--rf-green);
}
.form-privacy{
  font-size:13px;
  line-height:1.55;
  color:var(--rf-muted);
  margin:4px 0 0;
}
.form-privacy a{
  color:var(--rf-green);
  text-decoration:underline;
  text-underline-offset:2px;
}
.contact-submit{
  border:0;
  cursor:pointer;
  margin-top:20px;
}
.form-honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.legal-block h3{
  color:var(--rf-green);
  font-size:1.05rem;
  line-height:1.35;
  margin:24px 0 10px;
}
.legal-emphasis{
  margin-top:12px;
  padding:20px 22px;
  border-radius:14px;
  background:rgba(14,61,46,.06);
}
.legal-emphasis p:last-child{margin-bottom:0}

@media(max-width:767px){
  .contact-method-grid{grid-template-columns:1fr}
  .contact-direct,.contact-form-card{padding:24px 20px}
}