/* =========================================================
   consorten.de — gemeinsames Stylesheet für alle Prototyp-Seiten
   (index.html, strgf.html, strgf_kontakt.php, danke.html)
   ========================================================= */

:root{
  --green:#0b8642;
  --coral:#f93f18;
  --pink:#da175d;
  --brown:#a07552;
  --ink:#1A1A1A;
  --ink-soft:#000000;
  --paper:#ffffff;
  --page-gray:#D6D4CB;
  --line:#E4E1D8;
  --card:#FFFFFF;
  --font-display:'Source Sans 3', Arial, sans-serif;
  --font-body:'Petrona', Georgia, serif;
  --gutter:48px;
}
*{box-sizing:border-box;}
a{font-weight:700;}
html{scroll-behavior:smooth; margin:0; padding:0; zoom:clamp(1, calc(1 + (100vw - 1240px) / 1240px), 1.25);}
body{
  margin:0;
  padding:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--page-gray);
  line-height:1.6;
}
.sheet{
  background:var(--paper);
  max-width:1240px; margin:0 auto;
  display:flow-root; position:relative;
}

/* ---- fixed logo overlay (nur Startseite) ---- */
.site-logo-wrap{
  position:fixed; left:0; right:0; bottom:150px;
  max-width:1240px; margin:0 auto; padding:0 var(--gutter);
  z-index:500; pointer-events:none;
  opacity:0; transition:opacity 2.6s ease;
}
.site-logo-wrap.is-visible{
  opacity:1; transition:opacity .7s ease;
}
@media (prefers-reduced-motion: reduce){
  .site-logo-wrap{ opacity:1; transition:none; }
}
.site-logo{
  display:block; text-align:right; text-decoration:none; pointer-events:auto;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.01em; color:var(--ink); font-size:clamp(30px,4.1vw,41px);
  line-height:1.15;
}

/* ---- fixed back-arrow, gray margin left of the sheet (desktop only) ---- */
.back-arrow{
  position:fixed; top:200px; left:calc(50% - 660px);
  display:block; line-height:0; z-index:500;
}
.back-arrow-icon{ display:block; width:56px; height:auto; transition:filter .3s ease; }
.back-arrow:hover .back-arrow-icon{ filter:brightness(0); }
@media (max-width:1700px){
  .back-arrow{ display:none; }
}

/* ---- dash / wordmark / section headings ---- */
.dash{
  display:block; width:30px; height:5px; background:var(--ink);
  margin:0 0 44px;
}
.dash.pink{background:var(--ink);}
.wordmark{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.01em; font-size:clamp(30px,4.1vw,41px); line-height:1.2;
  padding:36px 0 28px; margin:0; color:var(--green);
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
}
.mobile-break{ display:none; }
@media (max-width:750px){
  .wm-break{ display:none; }
  .mobile-break{ display:inline; }
  .site-logo-wrap{ bottom:100px; }
}
.section-label{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; font-size:clamp(30px,4.1vw,41px); color:var(--pink);
  margin:0 0 .6em; line-height:1.15;
}

/* ---- layout basics ---- */
.wrap{max-width:1240px; margin:0 auto; padding:0 var(--gutter);}
section{padding:56px 0;}
section.tight{padding:40px 0;}
section.hero{padding:24px 0 48px;}
h1,h2,h3{margin:0 0 .5em; font-weight:800; letter-spacing:-.01em;}
h2{font-size:clamp(24px,3.4vw,32px); color:var(--ink);} /* danke.html nutzt ein einfaches <h2> ohne Klasse */
h2.section-title{font-size:clamp(24px,3.4vw,32px); color:var(--ink);}
h3.block-title{font-size:20px; color:var(--ink);}
p{margin:0 0 1em; color:var(--ink-soft); max-width:64ch; font-size:16px;}
p.lead{color:var(--ink); max-width:56ch;}
ul{margin:0 0 1em; padding-left:22px; color:var(--ink-soft); max-width:64ch; font-size:16px;}
ul li{margin-bottom:.4em;}
.eyebrow{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--coral); font-weight:700; margin-bottom:8px;}

/* ---- buttons ---- */
.btn{
  display:inline-block; padding:7px 28px; border-radius:0;
  background:var(--ink); color:#fff; text-decoration:none; font-weight:700;
  font-size:13px; text-transform:uppercase; letter-spacing:.03em;
  font-family:var(--font-display); border:none; cursor:pointer;
}
.btn:hover{background:#000;}
.btn.coral{background:var(--coral);}
.btn.pink{background:var(--pink);}
.btn.pink:hover{background:#000;}
.btn.tan{background:var(--brown); color:#fff; text-transform:none; font-family:var(--font-body); font-weight:700; letter-spacing:0;}
.btn.tan:hover{background:#000;}
.btn-arrow{
  position:absolute; right:100%; top:50%; transform:translateY(-50%);
  margin-right:25px; width:78px; height:78px; display:block;
  animation:btn-arrow-pulse 2.6s ease-in-out infinite;
  transform-origin:left center;
}
@keyframes btn-arrow-pulse{
  0%, 100%{ transform:translateY(-50%) scaleX(1); }
  50%{ transform:translateY(-50%) scaleX(1.14); }
}
.strgf-cta-wrap{
  position:absolute; right:0; bottom:0;
}
.link-strong{color:var(--coral); font-weight:700; text-decoration:none;}
.link-strong:hover{color:var(--ink);}
.cta-line{font-weight:700; color:var(--ink);}

/* ---- footer ---- */
.footer{
  padding:40px var(--gutter);
  font-size:16px; color:var(--ink-soft);
}
.footer a{color:var(--ink-soft); text-decoration:none;}
.footer a:not(.btn):hover{color:var(--ink);}
.footer a.coral{color:var(--coral);}
.footer a.coral:not(.btn):hover{color:var(--ink);}
.footer strong{color:var(--coral); font-family:var(--font-display); text-transform:uppercase; font-size:13px; letter-spacing:.03em;}

/* ---- Intro: box with downward arrow (nur Startseite) ---- */
.intro-row{
  display:flex; align-items:flex-start; gap:24px;
}
.intro-text{ flex:0 1 auto; min-width:330px; max-width:64ch; }
.intro-art{
  flex:1 1 auto; display:flex; justify-content:center; align-self:flex-end;
}
.intro-arrow-img{
  width:100px; display:block;
  animation:arrow-pulse 2.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes arrow-pulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.14); }
}
@media (prefers-reduced-motion: reduce){
  .intro-arrow-img{ animation:none; }
  .btn-arrow{ animation:none; }
}
@media (max-width:750px){
  .intro-row{ flex-direction:column; }
  .intro-section{ padding-top:0; }
  .wordmark{ padding-bottom:12px; }
  .intro-art{
    order:-1; align-self:flex-end; width:80px; flex:0 0 auto; margin:12px 0 0;
  }
  .intro-arrow-img{ width:80px; }
}

/* ---- mobile gutter / box padding ---- */
@media (max-width:600px){
  :root{ --gutter:15px; }
  .strgf-row{ padding-left:15px !important; padding-right:15px !important; }
  .triad-block{ padding-left:15px !important; padding-right:15px !important; }
  .card{ padding-left:15px !important; padding-right:15px !important; }
  .price-strip{ padding-left:15px !important; padding-right:15px !important; }
  .form-row{ grid-template-columns:1fr; gap:0; }
}

/* ---- Strg F teaser (nur Startseite) ---- */
.strgf-row{
  position:relative; background:var(--coral); color:#fff; padding:40px;
  margin-top:180px; margin-bottom:160px; overflow:visible;
  scroll-margin-top:180px;
}
.strgf-text{
  max-width:calc(100% - 456px); min-width:330px;
  display:flex; flex-direction:column; gap:14px;
}
.strgf-text h3{color:#fff; font-size:clamp(24px,3.4vw,32px); margin:0; font-family:var(--font-body);}
.strgf-text p{color:#FBDCD1; margin:0;}
.strgf-art{
  position:absolute; right:56px; top:-140px; width:380px;
}
.strgf-box-img{
  position:relative; width:100%; display:block;
}
.strgf-badge{
  position:absolute; top:89px; right:198px; width:150px; height:150px;
  transform:rotate(-8deg);
}
.strgf-cta{
  background:var(--pink);
  text-transform:none; font-family:var(--font-body);
}

/* Once the text has shrunk to its 330px floor, there's no more room
   beside a right-hand box — move the box above the text instead, still
   right-aligned. The CTA stays pinned to the bottom-right corner of the
   orange area in every case. */
@media (max-width:900px){
  .strgf-row{ margin-top:200px !important; padding-top:250px !important; margin-bottom:80px !important; padding-bottom:80px !important; }
  .strgf-text{ max-width:100% !important; min-width:0 !important; }
  .strgf-art{
    left:50% !important; right:auto !important; top:-170px !important; width:220px !important;
    transform:translateX(-50%) !important;
  }
  .strgf-badge{
    top:51px !important; right:115px !important; width:87px !important; height:87px !important;
  }
}

/* ---- Three-block section: Werkzeugkoffer / HIRNZ FÜHRUNG / Leitbildentwicklung
        (Startseite) und die Strategieberatung-Kacheln (Startseite) teilen sich
        diese Klassen ---- */
.triad{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin-top:56px;
}
@media (max-width:900px){
  .triad{ grid-template-columns:1fr; } /* 3 -> 1, no 2-column stop in between */
}
.strategie-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:32px; margin-top:8px;
}
@media (max-width:1100px){
  .strategie-grid{ grid-template-columns:repeat(2,1fr); } /* 4 -> 2 */
}
@media (max-width:600px){
  .strategie-grid{ grid-template-columns:1fr; } /* 2 -> 1 */
}
.triad-block{
  background:var(--card); border:1px solid var(--line); border-radius:0;
  padding:24px; position:relative;
  transition:background-color .45s ease, color .45s ease;
}


.triad-block.flash-1{ background:var(--pink); }
.triad-block.flash-2{ background:var(--coral); }
.triad-block.flash-3{ background:var(--green); }
.triad-block.flash-4{ background:var(--brown); }
.triad-block.flash-1,
.triad-block.flash-2,
.triad-block.flash-3,
.triad-block.flash-4{
  color:#fff !important; border-color:transparent;
}
.triad-block.flash-1 *,
.triad-block.flash-2 *,
.triad-block.flash-3 *,
.triad-block.flash-4 *{
  color:#fff !important;
}

/* ---- Wild scroll-triggered illustrations on the three triad blocks ----
   Each illustration flies in on an arced, slightly overshooting path when
   its card scrolls into view, holds briefly, then fades back out. Re-fires
   every time the card re-enters the viewport. */
.triad-illus{
  position:absolute; pointer-events:none; z-index:5; opacity:0;
  width:150px; top:-40px; right:-30px;
}
.triad-illus-0{ width:255px; top:auto; bottom:-70px; left:30px; right:auto; }
.triad-illus-2{ top:auto; bottom:-80px; right:-30px; }
@media (max-width:900px){
  .triad-illus-0{ width:170px; left:auto; right:-5px; }
  .triad-illus-2{ top:-55px; bottom:auto; right:-10px; }
}

.triad-illus.fly-in.triad-illus-0{ animation:fly-in-0 1.3s cubic-bezier(.2,.8,.2,1) forwards; }
.triad-illus.fly-in.triad-illus-2{ animation:fly-in-2 1.3s cubic-bezier(.2,.8,.2,1) forwards; }

@keyframes fly-in-0{
  0%{   opacity:0; transform:translate(160px,140px) rotate(110deg) scale(.25); }
  18%{  opacity:1; }
  42%{  transform:translate(-20px,-25px) rotate(-12deg) scale(1.2); }
  58%{  opacity:1; transform:translate(0,0) rotate(4deg) scale(1); }
  100%{ opacity:1; transform:translate(0,0) rotate(4deg) scale(1); }
}
@keyframes fly-in-2{
  0%{   opacity:0; transform:translate(60px,-220px) rotate(-100deg) scale(.25); }
  18%{  opacity:1; }
  42%{  transform:translate(-10px,30px) rotate(15deg) scale(1.2); }
  58%{  opacity:1; transform:translate(0,0) rotate(-5deg) scale(1); }
  100%{ opacity:1; transform:translate(0,0) rotate(-5deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .triad-illus{ display:none; }
}
.triad-head h3{margin:0 0 14px;}

/* ---- STRG-F-Folgeseite: Hero-Visual + Brown-Panel ---- */
.strgf-hero-intro{ margin-bottom:24px; }
/* real <img>, not a CSS background — full width, height follows its own
   native aspect ratio automatically so nothing is ever cropped. The box
   visual floats on top of it as an absolutely positioned overlay. */
.strgf-cards-wrap{
  position:relative;
  margin:0 calc(-1 * var(--gutter));
}
.strgf-cards-img{ width:100%; display:block; }
.strgf-hero-row{
  position:absolute; inset:0; box-sizing:border-box;
  padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:center;
}
.strgf-hero-visual{ display:flex; justify-content:center; }
.strgf-hero-box-img{ width:170px; display:block; }

.brown-panel{
  margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter) 40px;
  background:var(--brown); color:#fff;
}
.brown-panel .section-title{ color:#fff; }
.brown-panel p{ color:#fff; }

/* ---- card / facts / price-strip (STRG-F-Folgeseite) ---- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:0; padding:32px;
}
.facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:24px; margin-top:24px;
}
.facts .fact-label{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:13px; color:var(--coral); margin-bottom:6px;
}
.facts .fact-value{font-weight:700; color:var(--ink); font-size:16px;}
.price-strip{
  background:var(--coral); color:#fff; border-radius:0; padding:36px 40px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.price-strip .price{font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3.4vw,32px);}
.price-strip .price small{display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.85;}
.price-strip .btn{background:var(--ink);}

/* ---- form (Kontaktseite) ---- */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:20px; }
.field{ margin-bottom:20px; }
.field label{
  display:block; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:13px; color:var(--ink); margin-bottom:6px;
}
.field .req, .consent .req{ color:var(--coral); }
.field input[type="text"],
.field input[type="email"],
.field textarea{
  width:100%; border:1px solid var(--line); border-radius:0; padding:12px 14px;
  font-family:var(--font-body); font-size:16px; color:var(--ink); background:#fff;
}
.field input:focus, .field textarea:focus{
  outline:2px solid var(--coral); outline-offset:1px;
}
.field textarea{ min-height:140px; resize:vertical; }
.consent{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:28px;
}
.consent input{ margin-top:5px; flex:0 0 auto; }
.consent label{ font-size:14px; color:var(--ink-soft); }

/* ---- Zentrum für lustvolles Lernen: 3D-Sortierwürfel ---- */
.zentrum-row{
  display:flex; align-items:flex-start; gap:32px; margin-top:8px;
}
.zentrum-text{ flex:1 1 330px; min-width:330px; }
.zentrum-art{
  flex:0 0 220px; display:flex; justify-content:center;
  opacity:0; transform:translateY(40px) rotate(-8deg) scale(.6);
  margin-top:-44px; margin-left:-150px;
}
/* SVGs clip their content to the viewBox by default (overflow:hidden) —
   without this, the pegs get cut off the moment they fly outside the
   cube artwork's own tiny coordinate box instead of crossing the page */
.cube-svg{ overflow:visible; }
.zentrum-art.cube-in{
  animation:cube-fly-in 1.1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cube-fly-in{
  0%{   opacity:0; transform:translateY(60px) rotate(-14deg) scale(.55); }
  60%{  opacity:1; transform:translateY(-10px) rotate(4deg) scale(1.05); }
  100%{ opacity:1; transform:translateY(0) rotate(0deg) scale(1); }
}
/* resting state between flights — cube.js drives the actual flight via
   the Web Animations API (element.animate()) instead of CSS keyframes,
   so restarting a peg's flight never depends on a class-toggle/reflow
   trick that can silently stop working after a few cycles */
.peg{ transform-box:fill-box; transform-origin:center; opacity:0; }
@media (prefers-reduced-motion: reduce){
  .zentrum-art{ opacity:1; transform:none; }
  .peg{ animation:none !important; opacity:1; }
}
@media (max-width:750px){
  .zentrum-row{ flex-direction:column; gap:16px; }
  .zentrum-art{ margin:12px auto 0; }
  /* the SVG's own viewBox reserves ~50px of blank space above the cube
     (room for the pegs' resting position), which reads as extra gap on
     top of the margin/gap above once stacked on mobile — pull it up to
     compensate, .cube-svg keeps overflow:visible so flights aren't clipped */
  .cube-svg{ margin-top:-96px; }
}