/* ===========================================================================
   SUSNJARA Immobilientreuhand GmbH
   Startseite, Redesign 2026

   Gestaltungsidee: Das Modul der Marke ist das quadratische Post-it. Auf dem
   eigenen Foto der Firma ist eine Sprechblase Stueck fuer Stueck aus blauen
   Post-its gelegt. Dieses Raster wird hier zum Fundament der ganzen Seite.

   CI-Kern (unveraendert):  Blau #002395 · Rot #ED2939 · Mont
   CI-Erweiterung:          Nachtblau #00103A · Sand #E8E6E4 · Minion Pro
   =========================================================================== */

/* ---------------------------------------------------------------- Schriften */
@font-face{font-family:'Mont';src:url('../fonts/Mont-Regular.woff2') format('woff2'),url('../fonts/Mont-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Mont';src:url('../fonts/Mont-SemiBold.woff2') format('woff2'),url('../fonts/Mont-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Mont';src:url('../fonts/Mont-Bold.woff2') format('woff2'),url('../fonts/Mont-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Mont';src:url('../fonts/Mont-Heavy.woff2') format('woff2'),url('../fonts/Mont-Heavy.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Minion Pro';src:url('../fonts/MinionPro-Regular.woff2') format('woff2'),url('../fonts/MinionPro-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------- Marken */
:root{
  --tinte:#002395;
  --tinte-tief:#001B73;
  --nacht:#00103A;
  --signal:#ED2939;
  --signal-tief:#C81C2B;
  --papier:#fff;
  --sand:#E8E6E4;
  --kreide:#F4F3F1;
  --grafit:#5A5E6B;
  /* Neu, ausserhalb der CI: nur fuer den Stand "erledigt" auf der Wand.
     Ein Statusbrett ohne Gruen fuer fertig liest sich niemand. */
  --fertig:#1B8A57;
  --linie:rgba(0,35,149,.09);
  --linie-hell:rgba(255,255,255,.12);

  --satz:'Mont',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --stimme:'Minion Pro',Georgia,'Times New Roman',serif;

  --breite:1560px;
  --rand:clamp(20px,5vw,80px);
  --modul:clamp(30px,3.6vw,54px);   /* Kantenlaenge eines Post-it-Moduls */
  --leiste:52px;

  /* Weiche Formen aus Version 2 uebernommen. Eckig bleiben nur die
     Post-it-Module und die Fliesen des KLAR-Rasters, das ist die Idee. */
  --rund:22px;
  --rund-s:14px;
  --schatten:0 18px 40px rgba(0,17,58,.10);
  --schatten-tief:0 26px 54px rgba(0,17,58,.16);

  --kurz:.28s cubic-bezier(.4,0,.2,1);
  --mittel:.6s cubic-bezier(.16,1,.3,1);
  --lang:1s cubic-bezier(.16,1,.3,1);
}

/* -------------------------------------------------------------------- Basis */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--satz);font-weight:400;
  font-size:clamp(16.5px,1.03vw,18.5px);line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(237,41,57,.18);
}
/* Sprungziele duerfen nicht unter der festen Kopfleiste verschwinden. */
:target,section[id]{scroll-margin-top:calc(var(--leiste) + 18px)}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--signal);outline-offset:4px;border-radius:2px}
::selection{background:var(--signal);color:#fff}

.sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--signal);color:#fff;padding:14px 22px;font-weight:700}
.sprung:focus{left:16px;top:16px}

/* ------------------------------------------------------------------- Raster */
.feld{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.feld--weit{max-width:1860px}
.band{position:relative}
.luft{padding-block:clamp(66px,8.58vw,122px)}
.luft-s{padding-block:clamp(46px,5.46vw,75px)}

.band--sand{background:var(--sand)}
.band--kreide{background:var(--kreide)}
.band--nacht{background:var(--nacht);color:#fff}
.band--tinte{background:var(--tinte);color:#fff}

/* Sichtbares Modulraster, die Grundeinheit der Marke */
.raster{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--linie) 1px,transparent 1px),
    linear-gradient(to bottom,var(--linie) 1px,transparent 1px);
  background-size:var(--modul) var(--modul);
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 40%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse 100% 80% at 50% 40%,#000 20%,transparent 78%);
}
.raster--hell{background-image:
    linear-gradient(to right,var(--linie-hell) 1px,transparent 1px),
    linear-gradient(to bottom,var(--linie-hell) 1px,transparent 1px)}

/* --------------------------------------------------------------- Typografie */
.riese{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,7.4vw,9.2rem);line-height:.84;letter-spacing:-.035em;
}
.gross{font-weight:900;text-transform:uppercase;font-size:clamp(2.1rem,4.6vw,4.4rem);line-height:.92;letter-spacing:-.028em}
.mittel{font-weight:900;text-transform:uppercase;font-size:clamp(1.45rem,2.4vw,2.3rem);line-height:1.04;letter-spacing:-.018em}
.klein{font-weight:900;text-transform:uppercase;font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.16;letter-spacing:-.005em}
.riese,.gross,.mittel,.klein{overflow-wrap:break-word;text-wrap:balance}

.augenbraue{
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.24em;
  display:flex;align-items:center;gap:14px;
}
.augenbraue::before{content:"";width:clamp(24px,3vw,56px);height:2px;background:var(--signal);flex:none}

.lauf{font-size:clamp(1.05rem,1.36vw,1.28rem);line-height:1.58}
.notiz{font-size:.83rem;line-height:1.55;color:var(--grafit)}
.band--nacht .notiz,.band--tinte .notiz{color:rgba(255,255,255,.62)}

.stimme{font-family:var(--stimme);font-size:clamp(1.45rem,2.7vw,2.45rem);line-height:1.28}
.ziffer{font-family:var(--stimme);font-variant-numeric:lining-nums;letter-spacing:.01em}

.rot{color:var(--signal)}
.blau{color:var(--tinte)}
.gedimmt{color:var(--grafit)}
.band--nacht .gedimmt,.band--tinte .gedimmt{color:rgba(255,255,255,.66)}

/* ------------------------------------------------------------------- Knopf */
/* Vollrund. Die Quadrate der Post-it-Welt bleiben damit der einzige
   harte Gegenpol auf der Seite. */
.knopf{
  display:inline-flex;align-items:center;gap:12px;
  padding:17px 32px;font-weight:700;font-size:.88rem;
  text-transform:uppercase;letter-spacing:.09em;
  border:2px solid transparent;border-radius:999px;
  position:relative;overflow:hidden;
  transition:background var(--kurz),color var(--kurz),border-color var(--kurz),transform var(--kurz);
}
.knopf .pfeil{transition:transform var(--kurz)}
.knopf:hover .pfeil{transform:translateX(5px)}
.knopf--voll{background:var(--signal);color:#fff}
.knopf--voll:hover{background:var(--signal-tief)}
.knopf--linie{border-color:currentColor}
.knopf--linie:hover{background:var(--tinte);border-color:var(--tinte);color:#fff}
.band--nacht .knopf--linie:hover,.band--tinte .knopf--linie:hover{background:#fff;border-color:#fff;color:var(--tinte)}

/* ------------------------------------------------------------------- Kopf */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:var(--papier);border-bottom:1px solid var(--linie);
  transition:transform var(--mittel),background var(--kurz),border-color var(--kurz);
}
.kopf.ist-weg{transform:translateY(-104%)}
.kopf{padding-top:env(safe-area-inset-top)}
.kopf-in{display:flex;align-items:center;gap:clamp(20px,4vw,60px);height:var(--leiste);
  width:100%;max-width:1860px;margin-inline:auto;
  padding-left:max(var(--rand),env(safe-area-inset-left));
  padding-right:max(var(--rand),env(safe-area-inset-right))}
/* Der Name allein sagt niemandem, was die Firma macht. Der Zusatz schon. */
.marke{display:flex;align-items:center;gap:13px}
.marke img{width:clamp(124px,11vw,168px);height:auto;flex:none}
.marke-zusatz{display:block;padding-left:13px;border-left:1px solid var(--linie);
  font-size:.63rem;font-weight:700;line-height:1.32;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grafit)}
@media(max-width:700px){.marke-zusatz{display:none}}
.segel{display:flex;gap:clamp(16px,2.3vw,38px);margin-left:auto;align-items:center}
.segel a{
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  padding:6px 0;position:relative;
}
.segel a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--signal);
  transition:right var(--kurz);
}
.segel a:hover::after,.segel a[aria-current="page"]::after{right:0}
.segel .segel-tel{color:var(--signal)}
/* Sprachumschalter, sitzt neben dem Zeichen */
.sprachen{display:flex;gap:2px;align-items:center;margin-left:clamp(8px,1.4vw,18px)}
.sprachen a{
  font-size:.63rem;font-weight:700;letter-spacing:.1em;
  padding:6px 8px;border-radius:999px;color:var(--grafit);
  transition:background var(--kurz),color var(--kurz);
}
.sprachen a:hover{background:var(--kreide);color:var(--tinte)}
.sprachen a[aria-current="page"]{background:var(--tinte);color:#fff}
@media(max-width:420px){.sprachen a{padding:6px 6px;font-size:.6rem}}

.klapp{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;
  margin-left:auto;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px}
.klapp span{display:block;height:2px;background:var(--tinte);transition:transform var(--kurz),opacity var(--kurz),width var(--kurz)}
.klapp span:nth-child(1){width:26px}
.klapp span:nth-child(2){width:19px}
.klapp span:nth-child(3){width:26px}
.klapp[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.klapp[aria-expanded="true"] span:nth-child(2){opacity:0}
.klapp[aria-expanded="true"] span:nth-child(3){width:26px;transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------- Seitliche Reiter */
.reiter{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column}
.reiter a{
  writing-mode:vertical-rl;background:var(--signal);color:#fff;
  padding:20px 11px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  border-top:1px solid rgba(255,255,255,.28);transition:background var(--kurz),padding var(--kurz);
}
.reiter a:first-child{border-top:0;border-radius:16px 0 0 0}
.reiter a:last-child{border-radius:0 0 0 16px}
.reiter a:hover{background:var(--tinte);padding-inline:15px}

/* ================================================================== Buehne */
/* Spalte, nicht Reihe: unter dem Kopfbereich steht die Belegzeile als
   zweites Kind. In einer Reihe haette sie sich danebengesetzt. */
.buehne{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--leiste) + 2vh);padding-bottom:calc(2vh + var(--vk-hoehe,0px));overflow:hidden}
.buehne-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4vw,64px);align-items:center;width:100%;position:relative;z-index:2}

.buehne-wort{display:block;overflow:hidden}
.buehne-wort > span{display:block;transform:translateY(105%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.ist-geladen .buehne-wort > span{transform:translateY(0)}
.ist-geladen .buehne-wort:nth-of-type(2) > span{transition-delay:.11s}
.ist-geladen .buehne-wort:nth-of-type(3) > span{transition-delay:.22s}

.buehne-kopf{margin-bottom:clamp(11px,1.33vw,16px)}
.buehne-augenbraue{margin-bottom:clamp(15px,1.87vw,22px);opacity:0;transform:translateY(10px);transition:opacity .7s ease .5s,transform .7s ease .5s}
.ist-geladen .buehne-augenbraue{opacity:1;transform:none}

/* Der rotierende Dreiklang, uebernommen von der bestehenden Seite */
/* Alle drei Saetze liegen in derselben Rasterzelle. So bestimmt der
   laengste die Hoehe und nichts kann den Text darunter ueberlagern. */
.dreiklang{display:grid;margin-bottom:clamp(10px,1.17vw,14px)}
/* Die drei Zeilen laufen nacheinander ein, nicht als Block. Der Satz
   baut sich dadurch auf, wie man ihn auch sprechen wuerde. */
.dreiklang-satz{
  grid-area:1/1;visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .34s;
}
.dreiklang-satz.ist-aktiv{visibility:visible;pointer-events:auto;transition:visibility 0s}
/* Der Bereich, auf den sich der Dreiklang bezieht. Ohne diese Zeile
   stehen die Verben abstrakt im Raum und beziehen sich auf nichts. */
.dreiklang-satz .thema{
  display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  color:var(--grafit);
  opacity:0;transform:translateY(.32em);
  transition:opacity .3s ease,transform .3s ease;
}
.dreiklang-satz .thema::before{content:"";width:9px;height:9px;flex:none;background:var(--tinte)}
.dreiklang-satz.ist-aktiv .thema{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
}
.dreiklang-satz .zeile{
  display:block;opacity:0;transform:translateY(.32em);
  transition:opacity .3s ease,transform .3s ease;
}
.dreiklang-satz.ist-aktiv .zeile{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
}
.dreiklang-satz.ist-aktiv .thema{transition-delay:0s}
.dreiklang-satz.ist-aktiv .zeile:nth-child(2){transition-delay:.14s}
.dreiklang-satz.ist-aktiv .zeile:nth-child(3){transition-delay:.32s}
.dreiklang-satz.ist-aktiv .zeile:nth-child(4){transition-delay:.50s}
.dreiklang-satz .zeile{display:block;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.32rem,2.32vw,2.18rem);line-height:1.06;letter-spacing:-.02em}
.dreiklang-satz .zeile:nth-child(2){color:var(--signal)}

.buehne-lauf{max-width:46ch;margin-bottom:clamp(14px,1.64vw,18px);opacity:0;transform:translateY(12px);transition:opacity .7s ease .62s,transform .7s ease .62s}
.ist-geladen .buehne-lauf{opacity:1;transform:none}
.buehne-tasten{display:flex;flex-wrap:wrap;gap:12px;align-items:center;opacity:0;transform:translateY(12px);transition:opacity .7s ease .74s,transform .7s ease .74s}
.ist-geladen .buehne-tasten{opacity:1;transform:none}

/* Post-it-Schalter statt Punkte, daneben der Scroll-Hinweis */
.buehne-fuss{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(16px,1.87vw,21px);opacity:0;transform:translateY(12px);
  transition:opacity .7s ease .86s,transform .7s ease .86s}
.ist-geladen .buehne-fuss{opacity:1;transform:none}
.zettel-reihe{display:flex;gap:14px}
/* Echte Notizzettel: warmer Papierverlauf, Klebestreifen oben,
   aufliegender Schatten und eine leicht angehobene Ecke unten rechts. */
.zettel{
  position:relative;width:var(--modul);height:var(--modul);flex:none;
  border:0;padding:0;cursor:pointer;overflow:hidden;
  background:linear-gradient(158deg,#F1EEE8 0%,#E7E3DB 60%,#DDD8CF 100%);
  box-shadow:0 1px 1px rgba(0,17,58,.12),0 8px 14px -8px rgba(0,17,58,.5);
  transition:background var(--kurz),transform var(--kurz),box-shadow var(--kurz);
}
.zettel::before{content:"";position:absolute;left:16%;right:16%;top:0;height:5px;
  background:rgba(0,35,149,.09)}
.zettel::after{content:"";position:absolute;right:0;bottom:0;
  border-width:0 0 11px 11px;border-style:solid;
  border-color:transparent transparent rgba(255,255,255,.85) transparent;
  filter:drop-shadow(-1px -1px 1px rgba(0,17,58,.18))}
.zettel:nth-child(1){transform:rotate(-1.6deg)}
.zettel:nth-child(2){transform:rotate(1.1deg)}
.zettel:nth-child(3){transform:rotate(-.6deg)}
.zettel:hover{transform:translateY(-4px) rotate(0deg);box-shadow:0 8px 18px rgba(0,17,58,.18)}
.zettel[aria-selected="true"]{
  background:linear-gradient(158deg,#0B3AC4 0%,var(--tinte) 58%,#001B73 100%);
  box-shadow:0 2px 2px rgba(0,17,58,.2),0 12px 20px -8px rgba(0,35,149,.6)}
.zettel[aria-selected="true"]::before{background:rgba(255,255,255,.16)}
.zettel[aria-selected="true"]::after{border-color:transparent transparent rgba(255,255,255,.32) transparent}
.zettel .zettel-nr{position:absolute;inset:0;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;color:var(--tinte);transition:color var(--kurz)}
.zettel[aria-selected="true"] .zettel-nr{color:#fff}

/* Bildseite der Buehne */
.buehne-bild{position:relative;aspect-ratio:1/.86;overflow:hidden;background:var(--kreide);border-radius:var(--rund)}
.buehne-bild img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .85s ease,transform 1.4s cubic-bezier(.16,1,.3,1);
}
.buehne-bild img.ist-aktiv{opacity:1;transform:scale(1)}
.buehne-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:var(--rund);box-shadow:inset 0 0 0 1px var(--linie);
}
/* Blaue Module, die sich beim Laden dazulegen */
.zulage{position:absolute;right:0;bottom:0;display:flex;gap:3px;z-index:3}
.zulage i{
  display:block;width:var(--modul);height:var(--modul);background:var(--tinte);
  transform:translateY(120%);opacity:0;
  transition:transform .8s cubic-bezier(.34,1.4,.5,1),opacity .4s ease;
}
.zulage i:last-child{background:var(--signal)}
.ist-geladen .zulage i{transform:translateY(0);opacity:1}
.ist-geladen .zulage i:nth-child(1){transition-delay:.9s}
.ist-geladen .zulage i:nth-child(2){transition-delay:1.02s}
.ist-geladen .zulage i:nth-child(3){transition-delay:1.14s}

/* Scroll-Hinweis */
.hinweis{display:flex;align-items:center;gap:12px}
.hinweis span{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--grafit)}
.hinweis .strich{width:46px;height:1px;background:var(--grafit);transform-origin:left;animation:rutsch 2.4s ease-in-out infinite}
@keyframes rutsch{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}

/* Belegzeile unter der Buehne, aus Version 2 uebernommen: sagt in einer
   Zeile, wer hier eigentlich verwaltet. Die Marker sind Post-it-Module. */
.beleg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);
  padding-block:clamp(15px,1.79vw,20px) 0;border-top:1px solid var(--linie);margin-top:clamp(13px,1.56vw,18px)}
.beleg li{display:flex;flex-direction:column;gap:6px;padding-left:20px;position:relative}
.beleg li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;background:var(--signal)}
.beleg li:nth-child(even)::before{background:var(--tinte)}
.beleg b{font-weight:900;text-transform:uppercase;letter-spacing:-.012em;
  font-size:clamp(1.02rem,1.42vw,1.24rem);line-height:1.15}
.beleg span{font-size:.82rem;line-height:1.45;color:var(--grafit)}
@media(max-width:820px){.beleg{grid-template-columns:repeat(2,1fr);gap:clamp(16px,4vw,26px)}}

/* ======================================================== Ordnung aus Chaos */
.ordnung{position:relative;overflow:hidden;--p:0}
.ordnung-kopf{max-width:52ch;margin-bottom:clamp(33px,3.9vw,49px)}
.ordnung-feld{
  position:relative;width:100%;
  display:grid;grid-template-columns:repeat(19,1fr);
  gap:clamp(2px,.36vw,6px);
  aspect-ratio:19/5;
}
.fliese{
  position:relative;background:var(--tinte);
  box-shadow:0 1px 2px rgba(0,17,58,.16);
  /* Auch im Endzustand bleibt jedes Modul minimal schief, so wie die
     Haftnotizen auf dem Firmenfoto von Hand gelegt wurden. */
  transform:
    translate(calc(var(--dx) * (1 - var(--p))),calc(var(--dy) * (1 - var(--p))))
    rotate(calc(var(--dr) * (1 - var(--p)) + var(--rest) * var(--p)))
    scale(calc(1 + .35 * (1 - var(--p))));
  opacity:calc(.12 + .88 * var(--p));
  will-change:transform;
}
.fliese--signal{background:var(--signal)}
.ordnung-fuss{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);margin-top:clamp(33px,3.9vw,49px);align-items:flex-start}
.ordnung-fuss p{max-width:40ch}
.fortschritt{flex:none;width:clamp(120px,16vw,220px)}
.fortschritt-bahn{height:3px;background:var(--linie);position:relative;overflow:hidden}
.fortschritt-bahn i{position:absolute;inset:0 auto 0 0;background:var(--signal);transform:scaleX(var(--p));transform-origin:left}

/* ============================================== Der Weg einer Meldung
   Die Tafel bleibt stehen, waehrend man eine eigene Strecke scrollt.
   Nur so ist die Wanderung wirklich zu sehen: vorher war der Abschnitt
   so kurz, dass alles in einem Wimpernschlag vorbei war.
   Jeder Zettel traegt seinen Stand mit, der Text wechselt unterwegs
   von Offen ueber In Arbeit auf Erledigt. */
.wand{--p:0;--luecke:clamp(10px,1.6vw,22px);background:var(--kreide)}
.wand-strecke{position:relative;height:250vh}
.wand-halt{position:sticky;top:var(--leiste);height:calc(100svh - var(--leiste));
  display:flex;flex-direction:column;justify-content:center}
.wand-kopf{margin-bottom:clamp(18px,2.2vw,30px)}

.wand-tafel{position:relative}
/* Die drei Spuren als helle Flaechen, damit man sieht, wohin gewandert wird */
.wand-spuren{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--luecke);pointer-events:none}
.wand-spuren i{background:var(--papier);border-radius:18px;box-shadow:inset 0 0 0 1px var(--linie)}

.wand-spalten{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--luecke);margin-bottom:12px;padding:14px var(--luecke) 0}
.wand-spalten li{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  display:flex;align-items:center;gap:9px}
.wand-spalten li::before{content:"";width:9px;height:9px;flex:none;background:var(--grafit);opacity:.5}
.wand-spalten li:nth-child(2)::before{background:var(--signal);opacity:1}
.wand-spalten li:nth-child(3)::before{background:var(--fertig);opacity:1}

.wand-bahn{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--luecke);
  padding:0 var(--luecke) var(--luecke)}
.klebe{
  --pe:clamp(0,calc((var(--p) - var(--verzug)) * var(--spanne)),1);
  /* Dieselben Schwellen wie bei den Beschriftungen, damit Farbe und
     Wort zur selben Zeit umspringen. */
  --an-rot:calc(clamp(0,calc((var(--pe) - .27) * 8),1) * clamp(0,calc((.75 - var(--pe)) * 8),1));
  --an-gruen:clamp(0,calc((var(--pe) - .62) * 8),1);
  position:relative;grid-column:1;color:var(--tinte);
  padding:clamp(15px,1.7vw,20px);margin-bottom:var(--luecke);
  /* Papier statt Flaeche: warmer Verlauf, Klebestreifen oben, weicher
     Schatten, damit der Zettel aufliegt statt gemalt zu wirken.
     Darueber legen sich zwei Farbschleier, die mit dem Stand kommen. */
  background:
    linear-gradient(0deg,rgba(237,41,57,calc(var(--an-rot) * .13)),rgba(237,41,57,calc(var(--an-rot) * .13))),
    linear-gradient(0deg,rgba(27,138,87,calc(var(--an-gruen) * .15)),rgba(27,138,87,calc(var(--an-gruen) * .15))),
    linear-gradient(158deg,#F0EDE7 0%,#E6E2DA 62%,#DEDAD1 100%);
  box-shadow:
    0 1px 1px rgba(0,17,58,.10),
    0 10px 18px -10px rgba(0,17,58,.45),
    inset 0 0 0 2px rgba(237,41,57,var(--an-rot)),
    0 6px 26px -2px rgba(237,41,57,calc(var(--an-rot) * .5)),
    inset 0 0 0 2px rgba(27,138,87,var(--an-gruen)),
    0 6px 26px -2px rgba(27,138,87,calc(var(--an-gruen) * .5));
  transform:
    translateX(calc(var(--pe) * (200% + 2 * var(--luecke))))
    rotate(calc((1 - var(--pe)) * var(--dreh)));
  will-change:transform;
}
.klebe::before{content:"";position:absolute;left:12%;right:12%;top:0;height:9px;
  background:rgba(0,35,149,.07)}
.klebe:last-child{margin-bottom:0}
.klebe b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.2;margin-bottom:5px}
.klebe p{font-size:.8rem;line-height:1.45;color:var(--grafit)}

/* Der Stand wechselt mit, waehrend der Zettel wandert */
.stand{position:relative;display:block;height:1.5em;margin-bottom:9px}
.stand i{position:absolute;left:0;top:0;font-style:normal;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;white-space:nowrap}
/* Die drei Beschriftungen ueberlappen sich grosszuegig, sonst gibt es
   beim Wechsel einen Moment, in dem beide blass sind und nichts steht. */
.stand-offen {color:var(--grafit);opacity:clamp(0,calc((.40 - var(--pe)) * 8),1)}
.stand-arbeit{color:var(--signal);opacity:var(--an-rot)}
.stand-fertig{color:var(--fertig);opacity:var(--an-gruen)}
.stand-fertig::before{content:"✓ "}

.wand-fuss{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);align-items:flex-start;margin-top:clamp(18px,2.2vw,28px)}
.wand-fuss p{max-width:44ch}

@media(max-width:820px){
  /* Auf schmalen Geraeten bringt die Wanderung nichts, dort steht die
     Tafel still und jeder Zettel zeigt seinen eigenen Stand. */
  /* Ohne Scroll-Strecke traegt der Abschnitt seine Polsterung selbst,
     sonst klebt der erste Zettel an der Oberkante. */
  .wand{padding-block:clamp(46px,5.46vw,75px)}
  .wand-strecke{height:auto}
  .wand-halt{position:static;height:auto;display:block}
  .wand-spuren,.wand-spalten{display:none}
  .wand-bahn{grid-template-columns:1fr;padding:0}
  /* Ohne Wanderung gibt es keinen Fortschritt, der die Farbe treiben
     koennte. Deshalb haengt sie hier direkt am Stand des Zettels. */
  .klebe{transform:none !important;--an-rot:0;--an-gruen:0}
  .klebe[data-stand="In Arbeit"]{--an-rot:1}
  .klebe[data-stand="Erledigt"]{--an-gruen:1}
  .stand{height:auto;margin-bottom:8px}
  .stand i{position:static;display:none}
  .klebe[data-stand="Offen"]     .stand-offen {display:block}
  .klebe[data-stand="In Arbeit"] .stand-arbeit{display:block}
  .klebe[data-stand="Erledigt"]  .stand-fertig{display:block}
  .stand i{opacity:1 !important}
}

/* ======================================================= Notfall in Rot */
.notband{background:var(--signal);color:#fff}
.notband-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,44px);padding-block:clamp(28px,3.59vw,44px)}
.notband p{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.2vw,2.9rem);line-height:1.04;max-width:16ch}
.notband-nr{display:inline-flex;flex-direction:column;gap:6px}
.notband-nr b{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.86}
.notband-nr strong{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:900;letter-spacing:-.02em;
  transition:transform var(--kurz);display:block}
.notband-nr:hover strong{transform:translateX(6px)}

/* ============================================================ Fragen */
.fragen{max-width:78ch}
.frage{background:var(--kreide);margin-bottom:12px;
  transition:background var(--kurz),box-shadow var(--kurz)}
.frage[open]{background:var(--sand);box-shadow:var(--schatten)}
.frage summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:clamp(16px,1.9vw,24px) clamp(18px,2.1vw,28px);
  font-weight:900;text-transform:uppercase;letter-spacing:-.008em;
  font-size:clamp(.95rem,1.22vw,1.1rem);line-height:1.28;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";flex:none;margin-left:auto;width:18px;height:18px;position:relative;top:.18em;
  background:var(--tinte);
  -webkit-mask:linear-gradient(#000,#000) center/100% 2px no-repeat,linear-gradient(#000,#000) center/2px 100% no-repeat;
          mask:linear-gradient(#000,#000) center/100% 2px no-repeat,linear-gradient(#000,#000) center/2px 100% no-repeat;
  transition:transform var(--kurz),background var(--kurz);
}
.frage[open] summary::after{transform:rotate(45deg);background:var(--signal)}
.frage-text{padding:0 clamp(18px,2.1vw,28px) clamp(18px,2.1vw,26px) clamp(46px,4.6vw,60px)}
.frage-text p{font-size:.98rem;line-height:1.62;max-width:60ch}
.frage-text p + p{margin-top:10px}

/* ================================================================ Leistungen */
.leistung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,5vw,80px);align-items:center;
  padding-block:clamp(39px,4.68vw,61px);border-top:1px solid var(--linie)}
.leistung:first-of-type{border-top:0}
.leistung--gedreht .leistung-text{order:2}
.leistung-marke{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(13px,1.56vw,18px)}
.leistung-marke .ziffer{font-size:clamp(2rem,3.4vw,3.2rem);line-height:1;color:var(--signal)}
.leistung-marke .augenbraue::before{display:none}
.leistung-marke .augenbraue{gap:0}
.leistung-satz{margin-bottom:clamp(11px,1.4vw,15px)}
.leistung-lauf{max-width:46ch;margin-bottom:clamp(16px,1.87vw,20px)}
.leistung-bild{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--kreide);border-radius:var(--rund)}
.leistung-bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.leistung:hover .leistung-bild img{transform:scale(1.045)}
.leistung-bild::after{content:"";position:absolute;inset:0;border-radius:var(--rund);box-shadow:inset 0 0 0 1px var(--linie);pointer-events:none}

.punkte{columns:2;column-gap:clamp(20px,3vw,44px);max-width:56ch}
.punkte li{break-inside:avoid;padding-left:22px;position:relative;margin-bottom:9px;font-size:.94rem;line-height:1.45}
.punkte li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;background:var(--signal)}
@media(max-width:620px){.punkte{columns:1}}

/* ===================================================================== Kopf­frau */
.kopffrau{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,80px);align-items:center}
.kopffrau-bild{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--tinte);border-radius:var(--rund)}
.kopffrau-bild img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.kopffrau-tafel{position:absolute;left:0;bottom:0;background:var(--signal);color:#fff;padding:16px 22px;border-radius:0 var(--rund-s) 0 var(--rund)}
.kopffrau-tafel b{display:block;font-size:.98rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.kopffrau-tafel span{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;opacity:.9}

.crew{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(30px,3.43vw,44px)}
.kollege{position:relative}
.kollege-bild{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--kreide);border-radius:var(--rund-s)}
.kollege-bild img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1),filter var(--kurz)}
.kollege:hover .kollege-bild img{transform:scale(1.05)}
.kollege b{display:block;margin-top:12px;font-size:.9rem;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.kollege span{display:block;font-size:.76rem;color:var(--grafit);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:900px){.crew{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.crew{grid-template-columns:repeat(2,1fr)}}

/* ======================================================================= App */
.app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(30px,5vw,80px);align-items:center}

/* Die drei Ansichten einzeln und versetzt, statt als ein flaches Bild.
   Die mittlere steht vorn, die aeusseren treten zurueck. */
.geraete{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,1.4vw,20px)}

/* Echte Meldungen aus der App, schweben ueber den Geraeten */
.blase{position:absolute;z-index:4;background:#fff;color:var(--tinte);
  border-radius:var(--rund-s);padding:11px 15px;box-shadow:var(--schatten-tief);
  display:flex;align-items:center;gap:11px;max-width:224px}
.blase i{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;flex:none;
  font-style:normal;font-size:.85rem;font-weight:700}
.blase b{display:block;font-size:.79rem;font-weight:700;line-height:1.25}
.blase span > span{display:block;font-size:.71rem;color:var(--grafit);line-height:1.3}
.blase--offen{top:4%;left:-4%}
.blase--offen i{background:rgba(237,41,57,.13);color:var(--signal)}
.blase--brett{bottom:8%;right:-4%}
.blase--brett i{background:rgba(0,35,149,.11);color:var(--tinte)}
@media(max-width:1080px){.blase{max-width:186px}.blase--offen{left:0}.blase--brett{right:0}}
@media(max-width:520px){.blase{display:none}}
.geraet{flex:0 1 clamp(110px,15vw,210px);position:relative;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.42));
  transition:transform var(--t)}
.geraet img{width:100%;height:auto}
.geraet:nth-child(1){transform:translateY(26px) rotate(-3deg)}
.geraet:nth-child(2){z-index:2}
.geraet:nth-child(3){transform:translateY(26px) rotate(3deg)}
.app:hover .geraet:nth-child(1){transform:translateY(16px) rotate(-4.5deg)}
.app:hover .geraet:nth-child(2){transform:translateY(-8px)}
.app:hover .geraet:nth-child(3){transform:translateY(16px) rotate(4.5deg)}

/* Hinweis auf die App, steht im Kopfbereich in einer Zeile mit den
   Post-it-Schaltern. Eine eigene Zeile hat den Umschalter unter die
   Bildschirmkante gedrueckt. */
.app-wink{display:inline-flex;align-items:center;gap:12px;
  padding:9px 18px 9px 10px;border-radius:999px;background:var(--kreide);
  font-size:.8rem;font-weight:600;transition:background var(--kurz),transform var(--kurz)}
.app-wink:hover{background:var(--sand);transform:translateX(3px)}
.app-wink i{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
  background:var(--tinte);color:#fff;font-style:normal;font-size:.72rem;font-weight:700;flex:none}
.vorteile{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,32px);margin-top:clamp(23px,2.65vw,30px)}
.vorteil{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rund-s);padding:clamp(16px,1.8vw,22px);
  transition:background var(--kurz),transform var(--kurz)}
.vorteil:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.vorteil b{display:block;font-size:.92rem;font-weight:900;text-transform:uppercase;letter-spacing:-.005em;margin-bottom:6px}
.vorteil p{font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.7)}
.laden{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(21px,2.34vw,26px)}
.laden img{height:44px;width:auto}
.laden a{transition:transform var(--kurz),opacity var(--kurz)}
.laden a:hover{transform:translateY(-3px)}
@media(max-width:700px){.vorteile{grid-template-columns:1fr}}

/* ==================================================================== Stimmen */
.stimmen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,52px)}
.stimmen-erste{grid-column:1/-1}
.aussage{background:var(--kreide);border-radius:var(--rund);padding:clamp(22px,2.4vw,32px);
  transition:transform var(--kurz),box-shadow var(--kurz)}
.aussage:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.stimmen-erste{background:var(--tinte);color:#fff}
.stimmen-erste .aussage-wer span{color:rgba(255,255,255,.7)}
.aussage blockquote{margin-bottom:18px}
.aussage-wer{display:flex;align-items:center;gap:12px}
.aussage-wer i{width:10px;height:10px;background:var(--signal);flex:none;display:block}
.aussage-wer b{font-size:.86rem;font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.aussage-wer span{font-size:.8rem;color:var(--grafit)}
.stimmen-erste .stimme{font-size:clamp(1.7rem,3.4vw,3.1rem)}
@media(max-width:780px){.stimmen{grid-template-columns:1fr}}

/* ==================================================================== Kontakt */
.schluss{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:start}
.orte{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,36px);margin-top:clamp(21px,2.34vw,27px)}
.ort b{display:block;font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.16em;color:var(--signal);margin-bottom:8px}
.ort p{line-height:1.5}
.draht{margin-top:clamp(21px,2.34vw,27px);display:grid;gap:12px}
.draht a{display:flex;align-items:center;gap:14px;font-weight:700;font-size:clamp(1rem,1.5vw,1.28rem);
  border-bottom:1px solid var(--linie-hell);padding-bottom:12px;transition:gap var(--kurz),color var(--kurz)}
.draht a:hover{gap:22px;color:var(--signal)}
.draht a .marker{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);width:9ch;flex:none}
.notfall{margin-top:clamp(21px,2.34vw,26px);background:var(--signal);padding:clamp(22px,2.8vw,32px);display:block;border-radius:22px}
.notfall b{display:block;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;opacity:.88}
.notfall strong{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:900;letter-spacing:-.01em;display:block}
.notfall{color:#fff;transition:background var(--kurz)}
.notfall:hover{background:var(--signal-tief)}

.siegel{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin-top:clamp(30px,3.43vw,44px);
  padding-top:clamp(20px,2.34vw,27px);border-top:1px solid var(--linie)}
/* Die Siegel bleiben in ihren Originalfarben. Weiss eingefaerbt verliert
   das Treuhaender-Siegel den Adler und wird zur leeren Scheibe. */
.siegel-platte{background:#fff;border-radius:var(--rund-s);padding:clamp(14px,1.6vw,20px) clamp(18px,2vw,26px);flex:none}
.siegel img{height:clamp(38px,4vw,52px);width:auto}
.siegel p{max-width:34ch}

/* ======================================================================= Fuss */
.fuss{background:var(--nacht);color:#fff;padding-block:clamp(39px,4.68vw,57px) clamp(23px,2.34vw,27px)}
.fuss-oben{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,60px);justify-content:space-between;align-items:flex-start}
.fuss-marke img{width:186px;height:auto;filter:brightness(0) invert(1)}
.fuss-links{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,46px)}
.fuss-links a{font-size:.82rem;letter-spacing:.06em;color:rgba(255,255,255,.72);transition:color var(--kurz)}
.fuss-links a:hover{color:#fff}
.fuss-unten{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:clamp(28px,3.12vw,38px);
  padding-top:22px;border-top:1px solid var(--linie-hell)}
.fuss-unten p{font-size:.76rem;color:rgba(255,255,255,.5)}

/* ================================================================== Auftritte */
[data-auf]{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-auf].ist-da{opacity:1;transform:none}
[data-auf][data-verzug="1"]{transition-delay:.09s}
[data-auf][data-verzug="2"]{transition-delay:.18s}
[data-auf][data-verzug="3"]{transition-delay:.27s}
[data-auf][data-verzug="4"]{transition-delay:.36s}

/* ================================================================== Schmaler */
@media(max-width:1080px){
  .buehne-in{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .buehne{min-height:auto;padding-block:calc(var(--leiste) + 32px) 40px}
  .buehne-bild{aspect-ratio:16/10}
  .hinweis{display:none}
  .leistung,.kopffrau,.app,.schluss{grid-template-columns:1fr}
  .leistung--gedreht .leistung-text{order:0}
  .kopffrau-bild{aspect-ratio:4/3}
  .kopffrau-bild img{object-position:center 20%}
}
@media(max-width:820px){
  .reiter{display:none}
  .klapp{display:flex}
  .segel{
    position:fixed;inset:var(--leiste) 0 auto 0;background:var(--papier);
    flex-direction:column;align-items:flex-start;gap:0;margin:0;
    padding:8px var(--rand) 26px;border-bottom:1px solid var(--linie);
    /* Um die eigene Hoehe PLUS den Versatz von oben, sonst schaut die
       letzte Zeile unten wieder herein. Zugeklappt auch nicht tabbar. */
    transform:translateY(calc(-100% - var(--leiste) - 4px));visibility:hidden;
    transition:transform var(--mittel),visibility 0s linear var(--mittel);
    max-height:calc(100svh - var(--leiste));overflow-y:auto;
  }
  .segel.ist-offen{transform:translateY(0);visibility:visible;transition:transform var(--mittel),visibility 0s}
  .segel a{width:100%;padding:16px 0;font-size:.92rem;border-bottom:1px solid var(--linie)}
  .segel a::after{display:none}
  .ordnung-feld{aspect-ratio:19/5}
  .orte{grid-template-columns:1fr}
}

/* =============================================================== Ruhemodus */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .buehne-wort > span{transform:none}
  [data-auf]{opacity:1;transform:none}
  .fliese{transform:none !important;opacity:1 !important}
  .zulage i{transform:none;opacity:1}
}