/* =========================================================================
   SÜSS GRUPPE · BASIS
   Umsetzung des Designs "Suess Gruppe Website.dc.html" (Claude Design).
   Dunkle, 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 dunkel gestaltet. Die Angabe verhindert,
     dass Chrome und Edge im Systemmodus eigenmächtig nachkorrigieren. */
  color-scheme: dark;

  /* --- CI --- */
  --orange:#E25303;
  --orange-dark:#C04503;
  --orange-light:#F07227;
  --sand:#C7B49B;

  /* --- Flächen --- */
  --bg:#1A1917;
  --surface:#232120;
  --surface-2:#2A2724;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.28);

  /* --- Schrift ---
     Auf Wunsch durchgehend kontrastreiches Weiss. Die Abstufung bleibt, faellt
     aber deutlich flacher aus: die schwaechste Stufe liegt jetzt bei 75 %
     statt 45 % Weiss. Alle Werte auf dem Seitengrund #1A1917:
       --ink        16,4:1     --ink-70   12,2:1
       --ink-62     10,6:1     --ink-55    9,0:1  */
  --ink:#FFFFFF;
  --ink-strong:#FFFFFF;
  --ink-70:rgba(255,255,255,.90);
  --ink-62:rgba(255,255,255,.84);
  --ink-55:rgba(255,255,255,.75);
  --ink-45:rgba(255,255,255,.62);

  --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: der hellere CI-Ton. #E25303 erreicht auf dem
   Seitengrund 4,58:1, ueber halbtransparenten Flaechen (Panels ueber den
   Fotos) fiel es aber auf 4,02-4,23. #F07227 liegt bei 5,97:1. Fuer Flaechen
   bleibt --orange unveraendert. */
a{color:var(--orange-light);text-decoration:none;}
a:hover{color:#fff;}
::selection{background:var(--orange);color:#fff;}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}
::-webkit-scrollbar{width:10px;background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--surface-2);}
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;
}
.tag-quiet{
  font-weight:500;color:#fff;background:rgba(26,25,23,.62);
  border:1px solid var(--line-strong);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;}
.btn-pri:hover{background:var(--orange);color:#fff;}
.btn-pri:disabled{background:rgba(255,255,255,.14);color:var(--ink-45);cursor:not-allowed;}
.btn-line{background:transparent;color:#fff;border-color:var(--line-strong);}
.btn-line:hover{border-color:#fff;color:#fff;}
.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:#fff;}
/* 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:#fff;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:6px;
}
.btn-under:hover{color:#fff;border-color:#fff;}
.btn-sm{padding:18px 30px;font-size:12.5px;}
.btn-block{display:block;width:100%;}

/* -------------------------------------------------------------- Kopfzeile
   Liegt über dem Inhalt und ist zunächst transparent; ab 40 px Scroll setzt
   site.js die Klasse .is-solid. */
.site-hd{position:fixed;top:0;left:0;right:0;z-index:90;border-bottom:1px solid transparent;transition:background .35s ease,border-color .35s ease;}
.site-hd.is-solid{background:rgba(26,25,23,.94);border-bottom-color:rgba(255,255,255,.1);backdrop-filter:blur(10px);}
.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;}
.brand img{height:44px;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:#fff;text-transform:uppercase;line-height:1;}
.brand .sub{
  font-family:var(--display);font-weight:500;font-size:9.5px;letter-spacing:.26em;
  color:var(--ink-70);border-left:1px solid rgba(255,255,255,.18);padding-left:16px;line-height:1.5;
}

.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:#fff;}
.site-nav a[aria-current="page"]{color:#fff;}
.site-nav .nav-cta{
  font-weight:600;font-size:12px;color:#fff;
  border:1px solid var(--line-strong);padding:13px 22px;margin-left:18px;
  transition:background .2s,border-color .2s;
}
.site-nav .nav-cta:hover{background:var(--orange);border-color:var(--orange);}

/* Ladebalken beim Seitenwechsel */
.route-flash{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:rgba(226,83,3,.16);}
.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. */
.pic{background-size:cover;background-position:center;background-repeat:no-repeat;}
/* 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;
  background:rgba(26,25,23,.66);border:1px solid var(--line-strong);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:70px var(--pad) 46px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:44px;}
.site-ft img{height:42px;width:auto;margin-bottom:24px;}
.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:#fff;}
.site-ft ul a:hover{color:#fff;}
.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:34px;}
  .brand .sub{display:none;}
  .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;}
}