/* =========================================================================
   SÜSS GRUPPE · BASIS
   Umsetzung des Designs "Suess Gruppe Website.dc.html" (Claude Design).
   Helle, redaktionelle Bühne: Jost für Display und Labels, Lato für Lesetext.
   Alle Inline-Styles des Entwurfs sind hier zu Klassen aufgelöst – die CSP
   der Produktionsseiten erlaubt kein 'unsafe-inline'.
   ========================================================================= */

/* ---------------------------------------------- Schriften (selbst gehostet)
   Der Entwurf lädt Jost + Lato von fonts.googleapis.com. In der Produktion
   selbst gehostet: kein Drittland-Transfer, keine zusätzliche CSP-Quelle.
   Dateien nach assets/fonts/ – siehe README dort. Fehlen sie, greift der
   System-Fallback; das Layout bleibt gleich, die Anmutung wird flacher. */
@font-face{font-family:'JostLocal';src:url('../fonts/jost-200.woff2') format('woff2');font-weight:200;font-display:swap;}
@font-face{font-family:'JostLocal';src:url('../fonts/jost-300.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'JostLocal';src:url('../fonts/jost-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'JostLocal';src:url('../fonts/jost-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'LatoLocal';src:url('../fonts/lato-light.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'LatoLocal';src:url('../fonts/lato-regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'LatoLocal';src:url('../fonts/lato-bold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'LatoLocal';src:url('../fonts/lato-black.woff2') format('woff2');font-weight:900;font-display:swap;}

:root{
  /* Der Auftritt ist durchgehend hell gestaltet. Die Angabe verhindert,
     dass Chrome und Edge im Systemmodus eigenmächtig nachkorrigieren. */
  color-scheme: light;

  /* --- CI --- */
  --orange:#E25303;
  --orange-dark:#C04503;
  --orange-light:#F07227;
  /* Orange als Schriftfarbe braucht auf hellem Grund einen tieferen Ton:
     #E25303 erreicht auf Weiss nur 3,3:1, #F07227 sogar nur 2,6:1.
     --orange-ink ist deshalb der Ton fuer Schrift (6,4:1); --orange und
     --orange-dark bleiben die Flaechentoene mit weisser Schrift darauf.
     Ueber den Fotos, wo die Schrift weiss bleibt, gilt weiter
     --orange-light – dort ist der Grund dunkel. */
  --orange-ink:#A83A02;
  --sand:#C7B49B;
  /* Sand traegt als Schriftfarbe auf Weiss nicht (1,9:1). Fuer Schrift
     deshalb der abgedunkelte Verwandte mit 6,6:1 – erkennbar derselbe
     warme Ton. Als Flaeche bleibt --sand unveraendert. */
  --sand-ink:#6E5A40;

  /* --- Flächen ---
     Weiss als Grund, darauf ein warmes Off-White fuer abgesetzte Flaechen.
     Neutrales Grau wirkte neben dem Orange und den Sandtoenen kalt;
     --surface nimmt deshalb einen Hauch derselben Waerme auf. */
  --bg:#FFFFFF;
  --surface:#F6F3EF;
  --surface-2:#EDE8E0;
  --line:rgba(26,25,23,.14);
  --line-soft:rgba(26,25,23,.09);
  --line-strong:rgba(26,25,23,.30);

  /* --- Schrift ---
     Dieselbe Abstufung wie in der dunklen Fassung, nur umgekehrt: Tinte auf
     Papier statt Licht auf Dunkel. Alle Werte auf dem Seitengrund #FFFFFF:
       --ink        17,7:1     --ink-70   10,2:1
       --ink-62      7,8:1     --ink-55    6,0:1
     --ink-45 liegt bei 3,9:1 und ist ausschliesslich fuer ausgegraute
     Zustaende gedacht, nicht fuer Lesetext. */
  --ink:#1A1917;
  --ink-strong:#12110F;
  --ink-70:rgba(26,25,23,.86);
  --ink-62:rgba(26,25,23,.78);
  --ink-55:rgba(26,25,23,.68);
  --ink-45:rgba(26,25,23,.55);

  --display:'JostLocal','Jost',system-ui,'Segoe UI',sans-serif;
  --body:'LatoLocal','Lato',system-ui,'Segoe UI',Roboto,sans-serif;

  --nav-h:78px;
  --wrap:1560px;
  --pad:40px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--body);color:var(--ink);
  font-size:17.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
img{display:block;max-width:100%;height:auto;}
button{font-family:inherit;}
/* Orange als Schriftfarbe: auf hellem Grund der tiefere Ton --orange-ink
   (6,4:1). Fuer Flaechen bleibt --orange unveraendert. Ueber den Fotos, wo
   weisse Schrift steht, gilt weiterhin --orange-light – die Regeln dafuer
   stehen bei den Bildbuehnen in pages.css und finder.css. */
a{color:var(--orange-ink);text-decoration:none;}
a:hover{color:var(--ink);}
/* Weiss auf #E25303 kommt nur auf 3,84:1 – fuer markierten Text zu wenig.
   --orange-dark liegt bei 5,13:1. */
::selection{background:var(--orange-dark);color:#fff;}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}
::-webkit-scrollbar{width:10px;background:var(--surface);}
::-webkit-scrollbar-thumb{background:rgba(26,25,23,.26);}
main{flex:1;}

/* ------------------------------------------------------------- Bausteine */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}

/* Display-Überschriften: dünn, gesperrt, in Versalien – wie im Entwurf */
.dsp{
  font-family:var(--display);font-weight:300;
  line-height:1.04;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-strong);margin:0;text-wrap:balance;
}
.dsp-xl{font-size:clamp(40px,6.2vw,102px);line-height:.98;letter-spacing:.01em;}
.dsp-l{font-size:clamp(32px,4.2vw,66px);}
.dsp-m{font-size:clamp(30px,3.6vw,54px);line-height:1.08;}
.dsp-s{font-size:clamp(28px,3.2vw,48px);line-height:1.1;}

/* Kleines gesperrtes Label – im Entwurf das wichtigste Ordnungsmittel */
.label{
  font-family:var(--display);font-weight:500;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-55);margin:0;
}
.label-orange{color:var(--orange-light);}
.label-sand{color:var(--sand);}

.lede{font-family:var(--body);font-size:18px;line-height:1.72;color:var(--ink-70);margin:0;}
.rule{display:block;height:1px;background:var(--line);border:0;margin:0;}

/* ------------------------------------------------------------------- Tags */
/* Flaeche bewusst --orange-dark: weisse Schrift auf #E25303 erreicht nur
   3,84:1, auf #C04503 sind es 5,13:1. Erkennbar dasselbe Marken-Orange,
   nur einen Ton tiefer. */
.tag{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--orange-dark);padding:9px 13px;white-space:nowrap;
}
/* Der leise Chip steht ausschliesslich ueber Fotos: Statuszeile der Kacheln
   auf der Startseite, Merkmale auf der Bildbuehne der Detailseite. Er bleibt
   deshalb dunkel mit weisser Schrift – und braucht einen ausgeschriebenen
   weissen Rand, weil --line-strong in der hellen Fassung dunkel ist und auf
   dem Chip verschwunden waere. */
.tag-quiet{
  font-weight:500;color:#fff;background:rgba(26,25,23,.62);
  border:1px solid rgba(255,255,255,.34);padding:8px 13px;
}

/* ---------------------------------------------------------------- Buttons */
.btn{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:21px 40px;border:1px solid transparent;cursor:pointer;
  text-align:center;transition:background .22s,border-color .22s,color .22s;
}
.btn-pri{background:var(--orange-dark);color:#fff;}
/* Der Hover ging vorher auf das hellere #E25303 – dort erreicht die weisse
   Schrift nur 3,84:1, der Button wurde beim Ueberfahren also schlechter
   lesbar. Auf hellem Grund gehoert der Hover ohnehin nach unten: --orange-ink
   ist tiefer und bringt 6,4:1. */
.btn-pri:hover{background:var(--orange-ink);color:#fff;}
.btn-pri:disabled{background:rgba(26,25,23,.11);color:var(--ink-45);cursor:not-allowed;}
/* Auf hellem Grund tragen die Umriss-Varianten dunkle Schrift. Ueber den
   Fotos gilt weiter Weiss – siehe „Schrift über Fotos“ in pages.css. */
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-line:hover{border-color:var(--ink);color:var(--ink);background:rgba(26,25,23,.05);}
.btn-quiet{
  background:none;border:0;padding:14px 0;color:var(--ink-70);
  font-family:var(--display);font-weight:500;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
}
.btn-quiet:hover{color:var(--ink);}
/* Unterstrichener Textlink im Entwurfsstil */
.btn-under{
  display:inline-block;font-family:var(--display);font-weight:500;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line-strong);padding-bottom:6px;
}
.btn-under:hover{color:var(--orange-ink);border-color:var(--orange-ink);}
.btn-sm{padding:18px 30px;font-size:12.5px;}
.btn-block{display:block;width:100%;}

/* -------------------------------------------------------------- Kopfzeile
   In der dunklen Fassung lag die Kopfzeile zunaechst transparent ueber dem
   Titelfoto und wurde erst ab 40 px Scroll gefuellt (site.js setzt
   .is-solid). In der hellen Fassung geht das nicht auf: Wortmarke und Menue
   waren weiss und damit auf einer hellen Fuellung unsichtbar – ein dunkles
   Logo wiederum verschwindet auf dem hellen Himmel der Titelfotos. Die
   Kopfzeile ist deshalb von Anfang an hell gefuellt und traegt das dunkle
   Logo; die Bildbuehne beginnt darunter, statt darunter hindurchzulaufen
   (siehe .hero in pages.css). .is-solid legt beim Scrollen nur noch einen
   Schatten dazu, damit die Kante zum Inhalt sichtbar bleibt. */
.site-hd{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
  transition:box-shadow .35s ease,background .35s ease;
}
.site-hd.is-solid{background:rgba(255,255,255,.97);box-shadow:0 1px 18px rgba(26,25,23,.09);}
.site-hd-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:var(--nav-h);display:flex;align-items:center;gap:40px;}

.brand{display:flex;align-items:center;gap:16px;flex:none;}
/* Offizielles Logo der Süß-Projekte GmbH, 230 x 93 px. Fuer die helle
   Fassung ist die Wortmarke in dunkler Tinte im Einsatz
   (logo-suess-projekte-dunkel.png), die weisse Fassung liegt fuer den
   dunklen Rueckweg daneben. Auf der hellen Fuellung braucht das Logo keinen
   Schatten. Naeheres in assets/img/README-logo.txt. */
.brand img{height:48px;width:auto;}
/* Wortmarke als Ersatz, solange die Logodatei fehlt */
.brand .wm{display:flex;align-items:center;gap:11px;}
.brand .wm .bar{width:4px;height:30px;background:var(--orange);}
.brand .wm .tx{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.14em;color:var(--ink);text-transform:uppercase;line-height:1;}

.site-nav{display:flex;align-items:center;gap:6px;margin-left:auto;}
.site-nav a{
  font-family:var(--display);font-weight:500;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);padding:10px 15px;
  transition:color .2s;
}
.site-nav a:hover{color:var(--ink);}
.site-nav a[aria-current="page"]{color:var(--ink);}
.site-nav .nav-cta{
  font-weight:600;font-size:12px;color:var(--ink);
  border:1px solid var(--line-strong);padding:13px 22px;margin-left:18px;
  transition:background .2s,border-color .2s,color .2s;
}
/* Flaeche --orange-dark statt --orange: weisse Schrift erreicht dort 5,13:1
   statt 3,84:1 – dieselbe Begruendung wie beim Chip weiter oben. */
.site-nav .nav-cta:hover{background:var(--orange-dark);border-color:var(--orange-dark);color:#fff;}

/* Ladebalken beim Seitenwechsel */
.route-flash{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:rgba(226,83,3,.20);}
.route-flash span{display:block;height:2px;background:var(--orange);transform-origin:0 50%;animation:sg-load .7s cubic-bezier(.3,.8,.2,1) forwards;}

/* ----------------------------------------------------------------- Bilder
   Bildflächen liegen als background-image auf einem div – so lassen sich
   Zoom und Parallax ohne Layoutsprünge animieren. */
/* Kundenfeedback 03.09.2026: Die Fotos sollen hell und freundlich wirken. Die
   Bildflaechen werden deshalb leicht aufgehellt und in der Farbe angehoben;
   der eigentliche Hebel sind die deutlich duenneren Schleier in pages.css und
   finder.css. */
.pic{background-size:cover;background-position:center;background-repeat:no-repeat;filter:brightness(1.06) saturate(1.08);}
/* Mittig in der freien Bildfläche. Oben links stieß der Hinweis mit den Chips
   der Kachel zusammen (Status links, Region rechts). Die exakte Mitte wäre
   ebenfalls besetzt: der Textblock am Kartenfuß reicht bis auf 47 % der Höhe
   hinauf. 36 % liegt bei jeder Kartenhöhe (520/440/400 px) zwischen Chips und
   Text – gemessen, nicht geschätzt. */
.ph-note{
  position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);z-index:2;
  white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;
  /* Liegt auf der Bildflaeche: dunkel mit weisser Schrift und weissem Rand,
     unabhaengig von der Helligkeit der uebrigen Seite. */
  background:rgba(26,25,23,.66);border:1px solid rgba(255,255,255,.34);padding:6px 10px;
}

/* ------------------------------------------------- Hinweis „KI generiert"
   Kennzeichnung KI-generierter Bilder. Der Hinweis sitzt ueberall unten
   rechts am Bildrand – Bildbuehne der Detailseite, Kachel der Startseite und
   Galeriekachel gleich. Eine frueher probierte Variante, die auf der Kachel
   im Textfluss mitlief, landete optisch mitten im Bild und ist wieder raus.
   Auf der Kachel kollidiert die Ecke nicht mit der Groessenangabe: .in hat
   34 px Innenabstand, der Textblock endet also 34 px ueber dem Kartenrand.
   Der Hinweis liegt mit 9 px Abstand und rund 22 px Hoehe in genau diesem
   freien Streifen darunter.
   Farben ausgeschrieben statt ueber Tokens: der Hinweis liegt immer auf
   einem Foto, unabhaengig davon, wie hell die uebrige Seite ist. */
.ki-note{
  position:absolute;right:12px;bottom:9px;z-index:2;
  white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
  background:rgba(26,25,23,.70);border:1px solid rgba(255,255,255,.34);padding:5px 8px;
}
/* Die Bildbuehne der Detailseite ist gross und die Ecke dort voellig frei –
   etwas mehr Abstand und Schriftgroesse vertraegt sie gut. */
.d-hero-in .ki-note{right:20px;bottom:20px;font-size:10.5px;letter-spacing:.18em;padding:6px 10px;}

/* Variante im Textfluss – auf den Kacheln der Startseite. Dort ist die Karte
   auf dem Handy randvoll (Chips bis 102 px, Textblock ab 102 px), ein
   absoluter Wert würde also immer etwas überdecken. Als drittes Kind der
   Flex-Spalte verteilt space-between den Hinweis von selbst mittig zwischen
   Chips und Textblock – auf jeder Kartengröße, ohne feste Werte. */
.ph-note.ph-flow{position:static;transform:none;align-self:center;}

/* --------------------------------------------------------------- Fußzeile */
.site-ft{background:var(--surface);border-top:1px solid var(--line);margin-top:auto;}
.site-ft-in{max-width:var(--wrap);margin:0 auto;padding:84px var(--pad) 56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:56px;}
.site-ft img{height:46px;width:auto;margin-bottom:28px;}
.site-ft .wm{margin-bottom:24px;}
.site-ft p.about{font-family:var(--body);font-size:16px;line-height:1.7;color:var(--ink-70);margin:0;max-width:300px;}
.site-ft h2{font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-62);margin:0 0 18px;}
.site-ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.site-ft ul a{font-family:var(--body);font-size:16px;color:var(--ink);}
.site-ft ul a:hover{color:var(--orange-ink);}
.site-ft .note{font-family:var(--body);font-size:15px;line-height:1.7;color:var(--ink-70);margin:0;}
.site-ft-bar{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 40px;}
.site-ft-bar .rule{margin-bottom:22px;}
.site-ft-bar p{font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55);margin:0;}

/* -------------------------------------------------------------- Bewegung */
@keyframes sg-spin{to{transform:rotate(360deg)}}
@keyframes sg-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sg-inR{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes sg-inL{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes sg-load{0%{transform:scaleX(0)}60%{transform:scaleX(.72)}100%{transform:scaleX(1)}}
@keyframes sg-drift{
  0%{transform:scale(1.08) translate3d(-1.2%,-1%,0)}
  50%{transform:scale(1.16) translate3d(1.4%,1.2%,0)}
  100%{transform:scale(1.08) translate3d(-1.2%,-1%,0)}
}

/* Scroll-Reveal: Startzustand hier, das Aufdecken übernimmt site.js */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease;}
[data-rv].is-in{opacity:1;transform:none;}
[data-rv-d="1"]{transition-delay:.1s;}
[data-rv-d="2"]{transition-delay:.2s;}
[data-rv-d="3"]{transition-delay:.3s;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
  [data-rv]{opacity:1;transform:none;}
}

/* ------------------------------------------------------------ Responsive */
@media(max-width:1100px){
  :root{--pad:28px;}
}
@media(max-width:860px){
  :root{--pad:20px;--nav-h:66px;}
  body{font-size:16px;}
  .site-hd-in{gap:16px;}
  .brand img{height:38px;}
  .site-nav{gap:0;}
  .site-nav a{padding:10px 9px;font-size:11.5px;letter-spacing:.12em;}
  .site-nav .nav-cta{display:none;}
  .btn{padding:17px 26px;font-size:11px;}
  .site-ft-in{padding-top:52px;gap:34px;}
}
@media(max-width:560px){
  .site-nav a{padding:9px 7px;font-size:11px;letter-spacing:.1em;}
  .brand .wm .tx{font-size:17px;}
}

/* Sehr schmale Geräte (iPhone SE der ersten Generation, 320 px, und schmaler).
   Die Untergrenze von 40px in .dsp-xl ist hier zu groß: „BAUGRUNDSTÜCK“ ist
   als ein Wort 320 px breit, zur Verfügung stehen 280 px – das letzte K wurde
   abgeschnitten. Nur die Untergrenze sinkt, die Größe auf allen anderen
   Geräten bleibt unverändert. */
@media(max-width:380px){
  .dsp-xl{font-size:32px;}
  .dsp-l{font-size:29px;}
}