/* Gartenbau & Baumdienst Wöllner — Entwurf
   Gemeinsames Stylesheet fuer index.html, baumpflege.html,
   gartenbau.html und team.html. Eine Datei statt vier Kopien:
   vier Kopien laufen auseinander, sobald etwas geaendert wird. */

/* ─────────────────────────────────────────────────────────────
   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.

   Wöllner nutzt System B: 30 Jahre am Markt, acht institutionelle
   Auftraggeber, Baumarbeiten als Spezialkompetenz.
   ───────────────────────────────────────────────────────────── */

/* 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 B — handwerklich. Fuer System A diese Zeile ersetzen durch:
     --font-head:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     --head-track:-.015em;  --head-weight:700; */
  --font-head:'Bitter', Georgia, 'Times New Roman', serif;
  --head-track:-.005em;
  --head-weight:600;
  --font-body:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --accent:#1f7a2e;
  --accent-dark:#175d23;
  --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 fuenfzehn 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;}
header.site .brand span{
  font-family:var(--font-head);
  font-weight:700;font-size:15.5px;letter-spacing:0;color:var(--ink);
  display:none;
}
.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;}
  .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:50% 12%;
  animation:ken 20s linear infinite alternate;
}
/* Bildausschnitt: der Anschnitt liegt unten (kleine Y-Werte), damit oben
   kein Kopf und kein Ausleger abgeschnitten wird. Ken Burns zoomt vom
   oberen Rand, damit auch die Bewegung nichts nach oben herausschiebt. */
.hero-slide:nth-child(1) img{object-position:50% 12%;}  /* Arbeitsbuehnen: Ausleger reichen bis oben */
.hero-slide:nth-child(2) img{object-position:50% 8%;}   /* Kletterer sitzt im oberen Drittel */
.hero-slide:nth-child(3) img{object-position:50% 6%;}   /* Kopf des Saegenden ganz oben */
@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. Live mit 30 %, 15 % und 0 %
   geprueft — identisches Ergebnis. 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% 8%;}
.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 */
.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;
}
.bleed img{width:100%;height:clamp(280px,38vw,480px);object-fit:cover;object-position:50% 58%;}

/* Galerie — ein Bild fuehrt, der Rest bleibt klein. Die Spaltenbreite ist
   bewusst begrenzt: die Quellen sind 900x900, 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 */
.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 */
.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 */
.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;}
/* Peters Foto ist hochformatig (600x751) — 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 */
.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;}
}