/* Garten- und Landschaftsbau Beyazit — Entwurf
   Gemeinsames Stylesheet fuer index.html, leistungen.html und 404.html.
   Eine Datei statt Kopien: Kopien laufen auseinander, sobald etwas
   geaendert wird. Uebernommen aus der Referenz-Umsetzung; geaendert sind
   nur Akzentfarbe, Schriftsystem und die Bildausschnitt-Werte. */

/* ─────────────────────────────────────────────────────────────
   SCHRIFTSYSTEME — pro Betrieb eines auswaehlen

   System A  "sachlich"    Archivo + Source Sans 3
             Sachlich-robuste Grotesk ohne eigene Meinung.
             Traegt ueber sehr unterschiedliche Betriebe.
             Fuer: junge Betriebe, Pflaster-/Wegebau, gemischtes
             Leistungsbild, alles ohne klare eigene Note.

   System B  "handwerklich" Bitter + Source Sans 3
             Slab-Serif. Signalisiert Handwerk, Dauerhaftigkeit,
             Erfahrung. Faellt auf, wo alle Konkurrenten
             Open Sans benutzen.
             Fuer: lange am Markt, institutionelle Kunden,
             Meisterbetrieb, Familienbetrieb, Spezialisierung.

   Umschalten: NUR --font-head in :root aendern. Sonst nichts.
   Selbst gehostet, kein CDN, keine externe Verbindung.

   Beyazit nutzt System A: ueberwiegend Privatkunden, breites
   Leistungsbild von Pflaster bis Jahrespflege, keine
   Spezialkompetenz nach aussen.
   ───────────────────────────────────────────────────────────── */

/* Bitter ist ein Variable Font — eine Datei deckt alle Schnitte ab.
   font-weight:100 900 gibt dem Browser die volle Achse frei. */
@font-face{font-family:'Bitter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/Bitter-VariableFont_wght.ttf) format('truetype');}

/* Gross-/Kleinschreibung der Pfade muss stimmen — Netlify serviert von
   Linux. latin deckt Deutsch vollstaendig ab (ä ö ü ß liegen in
   U+0000-00FF); latin-ext wird per unicode-range nur bei Bedarf geladen. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Archivo-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Archivo-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Archivo-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Archivo-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SourceSans3-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SourceSans3-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/SourceSans3-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/SourceSans3-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  /* System A — sachlich. Fuer System B diese drei Zeilen ersetzen durch:
     --font-head:'Bitter', Georgia, 'Times New Roman', serif;
     --head-track:-.005em;  --head-weight:600; */
  --font-head:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --head-track:-.015em;
  --head-weight:700;
  --font-body:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  /* Akzent fertig aus dem Dossier uebernommen — Kontrast zu Weiss 4,98:1. */
  --accent:#497a53;
  --accent-dark:#3a6242;
  --ink:#1c1f1d;
  --muted:#5a625c;
  --tint:#f6f7f5;
  --line:#e2e5e0;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:#fff;
  font-size:17.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:64px;
}
img{max-width:100%;display:block;}
a{color:var(--accent);}
a:hover{color:var(--accent-dark);}
/* Laufweite und Schnittstaerke kommen aus den Systemvariablen: eine
   Slab-Serif vertraegt weniger negative Laufweite als eine Grotesk und
   wirkt bei 700 schnell klobig. */
h1,h2,h3{
  font-family:var(--font-head);font-weight:var(--head-weight);
  line-height:1.18;letter-spacing:var(--head-track);text-wrap:balance;margin:0;
}
p{text-wrap:pretty;}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;}
section{padding:64px 0;}
@media (min-width:900px){section{padding:80px 0;}}
.tint{background:var(--tint);}
h2{font-size:clamp(1.55rem,3.4vw,2.3rem);margin-bottom:30px;}

/* Einheitliche Bildbehandlung: die Fotos stammen aus vielen Jahren und
   aus verschiedenen Kameras. Eine dezente gemeinsame Kurve laesst sie wie
   eine Serie wirken — leicht entsaettigt, etwas mehr Kontrast, minimal
   waermer. Bewusst schwach dosiert, kein Filter-Look. */
.ph{filter:saturate(.9) contrast(1.05) brightness(1.02) sepia(.045);}

/* Banner */
.notice a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.notice{
  background:#fdf6e3;color:#8a6d1f;font-size:13px;line-height:1.45;
  text-align:center;padding:9px 16px;border-bottom:1px solid #efe2be;
}

/* Header */
header.site{
  background:#fff;border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px;padding:10px 20px 0;
}
header.site .brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto;}
header.site .brand img{height:44px;width:auto;}
/* Fuer diesen Betrieb liegt keine Logodatei vor: die Wortmarke ersetzt das
   Bild und muss deshalb auch unter 1080px sichtbar bleiben — sonst haette
   der Header dort gar keinen Absender. Farbe: Akzent. */
header.site .brand span{
  font-family:var(--font-head);
  font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--accent);
  display:inline;
}
.hdr-tel{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;flex:0 0 auto;
  padding:0 18px;border-radius:4px;background:var(--accent);color:#fff;
  text-decoration:none;font-family:var(--font-head);font-weight:700;
  font-size:16px;white-space:nowrap;letter-spacing:-.01em;
}
.hdr-tel:hover{background:var(--accent-dark);color:#fff;}
.mainnav{
  flex:1 0 100%;order:3;display:flex;gap:20px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.mainnav::-webkit-scrollbar{display:none;}
.mainnav a{
  color:var(--muted);text-decoration:none;
  font-family:var(--font-head);font-weight:600;font-size:15.5px;
  white-space:nowrap;padding:10px 0;border-bottom:2px solid transparent;
}
.mainnav a:hover{color:var(--accent);border-bottom-color:var(--accent);}
/* Aktive Seite: dunkler Text plus gruene Kante — auf einen Blick sichtbar,
   ohne die Zeile unruhig zu machen. */
.mainnav a.on{color:var(--ink);border-bottom-color:var(--accent);}
@media (min-width:1080px){
  header.site{
    position:sticky;top:0;z-index:40;
    flex-wrap:nowrap;gap:24px;padding:12px 24px;
  }
  header.site .brand{flex:0 0 auto;}
  header.site .brand span{display:inline;font-size:17px;}
  .mainnav{flex:1 1 auto;order:2;justify-content:flex-end;overflow:visible;}
  .mainnav a{padding:4px 0;}
}
section[id]{scroll-margin-top:90px;}

/* Hero — flacher als zuvor, weil die Quellbilder nur 1180x634 sind und
   auf breiten Schirmen sonst deutlich hochskaliert werden. */
.hero{position:relative;min-height:440px;height:62vh;overflow:hidden;background:#0e1310;}
@media (min-width:768px){.hero{min-height:500px;height:64vh;}}
@media (min-width:1400px){.hero{height:66vh;max-height:720px;}}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.5s ease-in-out;
}
.hero-slide.on{opacity:1;}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;
  object-position:center 60%;
  animation:ken 20s linear infinite alternate;
}
/* Bildausschnitt pro Bild einzeln, Werte aus dem Dossier und bei 1440 und
   1920 px visuell geprueft. Ken Burns zoomt vom oberen Rand, damit die
   Bewegung nichts nach oben aus dem Bild herausschiebt. */
.hero-slide:nth-child(1) img{object-position:center 60%;} /* Terrasse mit Kreismuster */
.hero-slide:nth-child(2) img{object-position:center 55%;} /* stehende Person mittig, klein — Kopf muss frei bleiben; hoehere Y-Werte schneiden oben MEHR ab, deshalb der Dossier-Grundwert */
.hero-slide:nth-child(3) img{object-position:center 50%;} /* Rosenbeet, kein Kopf im Bild */
@keyframes ken{
  from{transform:scale(1);transform-origin:50% 0%;}
  to{transform:scale(1.045);transform-origin:50% 0%;}
}

/* Unterseiten-Hero: ein Standbild, deutlich flacher, kein Karussell. */
.subhero{position:relative;height:45vh;min-height:300px;max-height:520px;overflow:hidden;background:#0e1310;padding:0;}
.subhero>img{width:100%;height:100%;object-fit:cover;}
/* X-Wert wirkt hier nicht: das Bild ist hoehenbegrenzt, nicht breitenbegrenzt,
   also gibt es horizontal nichts zu verschieben. Bleibt bei 50 %, damit der
   Wert nicht eine Wirkung suggeriert, die er nicht hat. */
/* Ein Modifier je Unterseite, durchnummeriert statt inhaltlich benannt —
   dieses Stylesheet ist die Referenz fuer alle weiteren Betriebe, und ein
   Pflasterbauer hat keine Baumseite. Werte pro Bild visuell bestimmen. */
.subhero--1>img{object-position:50% 60%;} /* Terrasse mit Kreismuster, Querformat 2048x1536 */
.subhero--2>img{object-position:50% 58%;}
.subhero--3>img{object-position:50% 12%;}

/* Der Verlauf darf leicht bleiben, weil die Schrift in einem eigenen
   dunklen Feld sitzt und nicht mehr auf dem Bild schwimmt. */
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,12,10,.55) 0%, rgba(8,12,10,.26) 45%, rgba(8,12,10,.10) 72%, rgba(8,12,10,.30) 100%);
}
.hero-inner{
  position:absolute;inset:auto 0 0 0;padding:0 20px 62px;
  max-width:1180px;margin:0 auto;
}
@media (min-width:768px){.hero-inner{padding:0 24px 74px;left:50%;transform:translateX(-50%);width:100%;}}
.subhero .hero-inner{padding-bottom:38px;}
@media (min-width:768px){.subhero .hero-inner{padding-bottom:46px;}}
.hero-panel{
  background:rgba(9,13,10,.82);
  padding:26px 24px 28px;max-width:36em;
}
@media (min-width:768px){.hero-panel{padding:34px 36px 36px;}}
.hero h1,.subhero h1{
  color:#fff;font-size:clamp(1.85rem,4.2vw,3.1rem);letter-spacing:-.025em;
  max-width:18em;
}
.hero .sub,.subhero .sub{
  color:rgba(255,255,255,.9);font-size:clamp(1rem,1.7vw,1.2rem);
  max-width:32em;margin:14px 0 24px;
}
.subhero .sub{margin-bottom:0;}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:4px;text-decoration:none;
  font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:-.01em;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);color:#fff;}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.75);}
.btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff;}
.dots{
  position:absolute;left:0;right:0;bottom:20px;z-index:3;
  display:flex;justify-content:center;gap:12px;
}
.dots button{
  width:12px;height:12px;padding:0;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.85);background:rgba(255,255,255,.28);
}
.dots button[aria-current="true"]{background:#fff;}

/* Vertrauensleiste */
.trust{background:var(--ink);color:#fff;padding:0;}
.trust ul{
  list-style:none;margin:0;padding:22px 20px;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 40px;font-size:16.5px;text-align:center;
}
.trust li{display:flex;align-items:center;gap:8px;}
.stars{color:#f0b429;letter-spacing:2px;}
.trust+section{padding-top:72px;}

/* Referenzkunden — drei tragende Namen gross, der Rest als Zeile.
   Dieser Betrieb hat keine Referenzkunden: Sektion entfaellt, Klasse
   bleibt fuer weitere Betriebe stehen. */
.refs-top{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr;}
@media (min-width:760px){.refs-top{grid-template-columns:repeat(3,1fr);}}
.refs-top li{
  background:var(--tint);border-top:3px solid var(--accent);
  padding:22px 20px 24px;display:flex;align-items:flex-start;
  font-family:var(--font-head);font-weight:700;font-size:19px;
  line-height:1.25;letter-spacing:-.01em;
}
.refs-rest{margin:22px 0 0;color:var(--muted);font-size:16.5px;max-width:60em;}

/* Leistungen — Symbol mittig, Text linksbuendig. Auf der Startseite sind
   die Karten Teaser und damit als Ganzes anklickbar. */
/* grid-auto-rows:1fr statt align-items:start — sonst ist jede Karte so hoch
   wie ihr eigener Text und das Raster wirkt ausgefranst. */
.cards{display:grid;gap:20px;grid-template-columns:1fr;grid-auto-rows:1fr;}
.cards>*{height:100%;}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr;}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr);}}
.card{
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:32px 26px 30px;text-align:left;
}
.card svg{display:block;width:54px;height:54px;margin:0 auto 20px;stroke-width:1.4;}
.card h3{font-size:1.24rem;margin-bottom:10px;}
.card p{margin:0;color:var(--muted);}
.card p+p{margin-top:12px;}
a.card{display:block;text-decoration:none;color:inherit;transition:border-color .2s;}
a.card h3{color:var(--ink);}
a.card:hover{border-color:var(--accent);}
a.card:hover h3{color:var(--accent-dark);}

/* Vollbreite Bildsektion — bricht den Rhythmus aus Karten-Rastern */
.bleed{padding:64px 0 0;}
.bleed .line{max-width:1180px;margin:0 auto 30px;padding:0 20px;}
.bleed .line p{
  margin:0;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.35rem,2.8vw,2rem);letter-spacing:-.02em;line-height:1.2;
}
/* Rosenbeet mit Randsteineinfassung: Mitte tragend, kein Kopf im Bild. */
.bleed img{width:100%;height:clamp(280px,38vw,480px);object-fit:cover;object-position:center 50%;}

/* Galerie — ein Bild fuehrt, der Rest bleibt klein. Die Spaltenbreite ist
   bewusst begrenzt: die Quellen sind nicht gross, mehr als rund 430px
   Anzeigegroesse wuerde sie weich aussehen lassen. */
.gal{display:grid;gap:10px;grid-template-columns:1fr 1fr;max-width:920px;}
@media (min-width:760px){.gal{grid-template-columns:repeat(4,1fr);gap:12px;}}
.gal button{
  padding:0;border:0;background:#e8eae6;cursor:pointer;display:block;
  aspect-ratio:1/1;overflow:hidden;border-radius:4px;
}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gal button:hover img{transform:scale(1.04);}
.gal .big{grid-column:span 2;}
.gal .wide{grid-column:span 2;aspect-ratio:2/1;}
@media (min-width:760px){.gal .big{grid-row:span 2;aspect-ratio:1/1;}}
.more-link{margin:26px 0 0;font-family:var(--font-head);font-weight:700;font-size:17.5px;}

/* Über uns */
.about{display:grid;gap:8px;grid-template-columns:1fr;align-items:start;}
@media (min-width:900px){.about{grid-template-columns:.9fr 1.1fr;gap:56px;}}
.about p{margin:0 0 18px;font-size:18px;}
.about p:last-child{margin-bottom:0;}
.about .last{font-weight:600;color:var(--ink);}
.about .env{color:var(--muted);}

/* Einleitung und Textbloecke der Unterseiten */
.intro{max-width:46em;}
.intro .lead-big{
  margin:0 0 20px;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.02em;line-height:1.2;
}
.intro p{font-size:18px;margin:0 0 16px;}
.intro p:last-child{margin-bottom:0;}
.blocks{display:grid;gap:30px;grid-template-columns:1fr;}
@media (min-width:820px){.blocks{grid-template-columns:1fr 1fr;gap:44px;}}
.block{border-top:2px solid var(--line);padding-top:16px;}
.block h3{font-size:1.2rem;margin-bottom:10px;}
.block p{margin:0;color:var(--muted);}
.block p+p{margin-top:12px;}
.skt-line{
  margin:40px 0 0;border-top:2px solid var(--accent);padding-top:16px;
  font-family:var(--font-head);font-weight:700;font-size:19px;
  color:var(--accent-dark);
}

/* So läuft es ab — dieser Betrieb hat keine Ablaufbeschreibung,
   Sektion entfaellt. */
.steps{display:grid;gap:28px;grid-template-columns:1fr;}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:40px;}}
.step{border-top:2px solid var(--line);padding-top:16px;}
.step .n{
  font-family:var(--font-head);font-weight:700;font-size:14px;
  letter-spacing:.1em;color:var(--accent);display:block;
}
.step h3{font-size:1.16rem;margin:8px 0 8px;}
.step p{margin:0;color:var(--muted);}

/* Maschinenpark — keine Bezeichnungen belegt, Sektion entfaellt. */
.speclist{background:var(--ink);color:#fff;}
.speclist h2{color:#fff;}
.speclist-grid{display:grid;gap:34px;grid-template-columns:1fr;align-items:start;}
@media (min-width:900px){.speclist-grid{grid-template-columns:1fr 1.05fr;gap:56px;}}
.speclist .lead{margin:0 0 24px;font-size:19px;color:rgba(255,255,255,.9);max-width:26em;}
.speclist figure{margin:0;}
.speclist figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;}
.speclist figcaption{
  margin-top:12px;font-family:var(--font-head);font-weight:600;
  font-size:16px;color:rgba(255,255,255,.68);
}
.speclist ul{list-style:none;margin:0;padding:0;}
.speclist li{padding:14px 0;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.76);font-size:16.5px;line-height:1.5;}
.speclist li strong{
  display:block;font-family:var(--font-head);font-weight:700;
  font-size:17.5px;color:#fff;letter-spacing:-.01em;
}

/* Team — keine Personen belegt, Sektion entfaellt. */
.team{display:grid;gap:22px;grid-template-columns:1fr 1fr;}
@media (min-width:900px){.team{grid-template-columns:repeat(3,1fr);gap:30px;}}
.team figure{margin:0;}
.team img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:#e8eae6;}
/* Hochformatige Portraits: Ausschnitt nach oben verlegen, damit im
   quadratischen Raster der Kopf drin bleibt. */
.team img.tall{object-position:50% 25%;}
.team h3{font-size:1.12rem;margin:16px 0 2px;}
.team .role{margin:0;color:var(--muted);font-size:16px;line-height:1.35;}
.team .cap{margin:8px 0 0;font-size:16.5px;color:var(--ink);}
.team-lead{margin:0 0 34px;max-width:34em;font-size:18px;color:var(--muted);}
.grouphead{margin:56px 0 26px;font-size:1.35rem;}

/* Bewertungen — die 5,0 traegt die Sektion */
.rate{display:grid;gap:34px;grid-template-columns:1fr;align-items:start;}
@media (min-width:900px){.rate{grid-template-columns:minmax(230px,300px) 1fr;gap:60px;}}
.rate .num{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(5rem,13vw,9.5rem);line-height:.82;letter-spacing:-.05em;
  color:var(--ink);
}
.rate .of{margin:14px 0 0;font-size:19px;font-family:var(--font-head);font-weight:600;}
.rate .stars{font-size:24px;display:block;margin-top:14px;}
.qs{display:grid;gap:0;}
.qs figure{margin:0;padding:24px 0;border-top:1px solid var(--line);}
.qs figure:last-child{border-bottom:1px solid var(--line);}
.qs blockquote{margin:0 0 10px;padding:0;font-size:17.5px;}
.qs figcaption{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--muted);}

/* Karriere — keine Personalsuche belegt, Sektion entfaellt. */
.career{background:var(--accent);color:#fff;border-radius:6px;padding:34px 26px;}
@media (min-width:768px){.career{padding:44px 44px 46px;}}
.career h2{margin:0 0 10px;color:#fff;max-width:24em;}
.career p{margin:0;color:rgba(255,255,255,.94);font-size:18px;}
.career p+p{margin-top:14px;}
.career a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.career a:hover{color:#fff;}

/* Kontakt */
.contact{display:grid;gap:28px;grid-template-columns:1fr;}
@media (min-width:800px){.contact{grid-template-columns:1fr 1fr;}}
.loc{border-top:2px solid var(--accent);padding-top:16px;}
.loc h3{font-size:1.15rem;margin-bottom:6px;}
.loc address{font-style:normal;color:var(--muted);margin:0 0 12px;}
.loc a,.loc .locnum{
  font-family:var(--font-head);font-weight:700;font-size:18.5px;
  text-decoration:none;letter-spacing:-.01em;
}
.loc .locnum{color:var(--ink);}
.contact-lead{font-size:18px;margin:0 0 30px;max-width:38em;}
.mail-line{margin:30px 0 0;font-size:18px;}
.owner{
  margin:44px 0 0;background:var(--tint);padding:24px;
  display:grid;gap:22px;grid-template-columns:1fr;align-items:center;
}
@media (min-width:600px){.owner{grid-template-columns:160px 1fr;gap:30px;padding:28px 32px;}}
.owner img{width:100%;max-width:220px;aspect-ratio:1/1;object-fit:cover;border-radius:4px;}
.owner h3{font-size:1.2rem;margin-bottom:8px;}
.owner p{margin:0;font-size:18px;color:var(--muted);}

/* Footer */
footer.site{background:var(--ink);color:rgba(255,255,255,.72);padding:44px 0;font-size:15px;}
footer.site strong{font-family:var(--font-head);color:#fff;display:block;margin-bottom:8px;font-size:17.5px;}
footer.site p{margin:0 0 6px;}
footer.site .fnav{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;}
footer.site .fnav a{color:rgba(255,255,255,.86);text-decoration:none;font-family:var(--font-head);font-weight:600;font-size:15.5px;}
footer.site .fnav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}

/* Lightbox */
#lb{position:fixed;inset:0;z-index:90;display:none;background:rgba(8,10,9,.93);padding:24px;}
#lb.on{display:flex;align-items:center;justify-content:center;}
#lb img{max-width:min(1100px,94vw);max-height:88vh;width:auto;border-radius:4px;}
#lb .x{
  position:absolute;top:14px;right:14px;width:48px;height:48px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;
}

/* Mobile Anrufleiste */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--accent);color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;font-family:var(--font-head);font-weight:700;font-size:18px;
}
@media (min-width:768px){
  .callbar{display:none;}
  body{padding-bottom:0;}
}

/* Telefonnummern nach Eingabeart, nicht nach Bildschirmbreite.
   Auf einem Rechner oeffnet ein tel:-Link Skype oder einen Dialer-Dialog —
   schlechter erster Eindruck. Dort fuehrt derselbe Button deshalb zum
   Kontaktblock, und die Nummern im Kontaktblock sind schlichter Text.
   hover/pointer statt Breite, damit Touch-Notebooks richtig behandelt werden.
   Diese Regeln stehen bewusst am Ende — sie muessen die Basisregeln schlagen. */
.copy-ic{
  width:36px;height:36px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid var(--line);background:#fff;border-radius:4px;
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
}
.copy-ic:hover{border-color:var(--accent);color:var(--accent);}
.copy-ic svg{width:16px;height:16px;}
.copy-row{display:inline-flex;align-items:center;gap:10px;}
.copy-hint{
  font-family:var(--font-body);font-size:14px;font-weight:600;
  color:var(--accent);opacity:0;transition:opacity .2s;
}
.copy-hint.on{opacity:1;}
.career .copy-ic{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.career .copy-ic:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff;}
.career .copy-hint{color:#fff;}
.career .copy-num{font-family:var(--font-head);font-weight:700;font-size:19px;}
.hdr-tel.copy-ic{width:auto;height:auto;}

.only-desk{display:none;}
@media (hover:hover) and (pointer:fine){
  .only-touch{display:none;}
  p.only-desk{display:block;}
  .only-desk.hdr-tel,.only-desk.btn{display:inline-flex;}
  .only-desk.locnum,.only-desk.copy-row{display:inline-flex;}
  /* Anrufleiste ist nur auf Touch-Geraeten sinnvoll — auf einem Rechner
     waere sie ein tel:-Link, der einen Dialer-Dialog oeffnet. */
  .callbar{display:none;}
  body{padding-bottom:0;}
}

@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:none;}
  .hero-slide img{animation:none;}
  .gal img{transition:none;}
}