/* =========================================================
   Biber Trans – statische Seite
   Masterlayout: FireShot 080 (Startseite) / 081 (Impressum)
   Referenzbreite: 1440 px
   ========================================================= */

/* Roboto lokal einbinden (keine Verbindung zu Google, DSGVO).
   Die woff2-Dateien bitte in /fonts ablegen (siehe fonts/LIESMICH.txt).
   Fehlen sie, greift automatisch die Ersatzschrift. */
@font-face{font-family:"Roboto";font-style:normal;font-weight:300;font-display:swap;
  src:local("Roboto Light"),local("Roboto-Light"),url("../fonts/roboto-v30-latin-300.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;
  src:local("Roboto"),local("Roboto-Regular"),url("../fonts/roboto-v30-latin-regular.woff2") format("woff2");}

:root{
  --braun:#a48362;
  --braun-dunkel:#8c6d4f;
  --grau-hg:#eceaeb;
  --grau-box:#717171;
  --grau-footer:#717171;
  --text:#333333;
  --weiss:#ffffff;
  --container:741px;
  --font-text:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",Arimo,sans-serif;
  --font-roboto:"Roboto","Segoe UI","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grau-hg);color:var(--text);
  font-family:var(--font-text);font-size:14px;line-height:21px;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-weight:400}
strong{font-weight:400}           /* Master zeigt Zwischenzeilen nicht fett */

.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:100}
.skip-link:focus{left:8px;top:8px}

.container{width:var(--container);max-width:100%;margin:0 auto}

/* ---------- Header ---------- */
.site-header{background:var(--weiss);height:62px}
.site-header .container{padding-top:13px}
.logo{display:inline-block}
.logo img{width:113px;height:36px}

/* ---------- Hero ---------- */
.hero{position:relative;height:331px;background:#2b2a26 url("../img/titelbild.jpg") center center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.13)}

/* ---------- Intro ---------- */
.intro{position:relative;background:var(--grau-hg);padding:57px 0 28px}
.intro::after{ /* Pfeil nach unten in den weißen Bereich */
  content:"";position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);
  border-left:25px solid transparent;border-right:25px solid transparent;border-top:20px solid var(--grau-hg);z-index:2}
.h-braun{color:var(--braun);font-family:var(--font-text);font-weight:400}
.intro h1{font-size:26.45px;line-height:32px;margin-left:-6px}
.intro-grid{display:grid;grid-template-columns:526px 1fr;margin-top:52px}
.intro-text p{margin-bottom:12px}
.intro-text p:last-child{margin-bottom:0}
.intro-badge{position:relative}
.intro-badge img{position:absolute;left:18px;top:-1px;width:189px;
  transition:transform .3s ease}
.intro-badge img:hover{transform:rotate(-8deg)}

/* ---------- Leistungen ---------- */
.leistungen{background:var(--weiss);padding:37px 0 44px;position:relative}
.leistungen h2{font-size:21.15px;line-height:25px;text-align:center}
.check-list{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(4,auto);column-gap:20px}
.check-list li{display:flex;align-items:flex-start;gap:9px;padding:0 0 12px 9px;min-height:33px}
.check-list li:nth-child(n+5){padding-left:10px}
.check-list svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px}
.check-list span{line-height:20px}

.ding{font-size:28.85px;line-height:34px;text-align:center;margin-top:64px}
.ding .oval{position:relative;display:inline-block;margin-left:1px;padding:0 3px}
.ding .oval svg{position:absolute;left:50%;top:50%;width:122%;height:140%;
  transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.ding .oval path{fill:none;stroke:var(--braun);stroke-width:2.2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Bildleiste ---------- */
.bildleiste{background:var(--grau-hg);padding:46px 27px 45px}
.bildleiste .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25.5px}
.bildleiste img{width:100%;height:133px;object-fit:cover;object-position:center}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--weiss);padding:50px 0 0}
.boxen{display:grid;grid-template-columns:repeat(3,239px);justify-content:space-between}
.box{position:relative;background:var(--grau-box);color:var(--weiss);min-height:152px;
  text-align:center;font-family:var(--font-roboto);font-weight:300;padding:23px 12px 20px}
.box .icon{position:absolute;left:50%;top:-17px;transform:translateX(-50%);
  width:36px;height:36px;border-radius:50%;background:var(--braun);border:2px solid var(--weiss);
  display:flex;align-items:center;justify-content:center}
.box .icon svg{width:17px;height:17px;fill:var(--weiss)}
.box h2{font-size:16px;line-height:24px;font-weight:300}
.box h2 a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.box p{font-size:14px;line-height:19px;margin-top:9px}
.box p a{text-decoration:none}
.box p a:hover,.box h2 a:hover{color:#f3e7da}

.region-link{text-align:center;padding:58px 0 59px}
.region-link a{color:var(--braun);font-size:21.15px;line-height:26px;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.region-link a:hover{color:var(--braun-dunkel)}

/* ---------- Karte ---------- */
.karte{background:var(--weiss);padding:0 6px 6px 7px}
.karte-inner{position:relative}
.karte img{width:100%;height:auto}
.karte .hotspot{position:absolute;left:43.3%;top:45.7%;display:flex;align-items:center;gap:9px;
  background:var(--braun);color:var(--weiss);text-decoration:none;font-size:13px;line-height:17px;
  padding:8px 8px 8px 9px;border-radius:2px;white-space:nowrap}
.karte .hotspot:hover{background:var(--braun-dunkel)}
.karte .hotspot svg{width:11px;height:11px;fill:currentColor}
.karte .attribution{position:absolute;right:4px;bottom:2px;font-size:9px;line-height:12px;color:#555;
  background:rgba(255,255,255,.75);padding:0 4px}

/* ---------- Footer ---------- */
.site-footer{background:var(--grau-footer);color:var(--weiss);height:38px}
.site-footer .container{display:flex;justify-content:space-between;align-items:stretch;height:38px}
.site-footer .copy{margin:0 0 0 -7px;align-self:center;font-size:13px}
.site-footer nav ul{list-style:none;margin:0;padding:0;display:flex;height:100%;margin-right:-6px}
.site-footer nav a{display:flex;align-items:center;height:38px;padding:0 13px;text-decoration:none;font-size:13px;border-bottom:1px solid transparent}
.site-footer nav a:hover{background:#6a6a6a}
.site-footer nav a[aria-current="page"]{background:#6a6a6a;border-bottom-color:var(--braun)}

/* ---------- Kontakt-Lasche unten (fixiert) ---------- */
.kontakt-tab{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:50;
  display:flex;gap:11px;align-items:center;background:var(--braun);color:var(--weiss);
  height:45px;padding:0 15px 0 13px;border-radius:10px 10px 0 0;font-size:13px;white-space:nowrap}
.kontakt-tab a{display:flex;align-items:center;gap:8px;text-decoration:none}
.kontakt-tab a:hover{text-decoration:underline}
.kontakt-tab svg{fill:var(--weiss)}
.page-bottom-space{height:46px}

/* ---------- Unterseiten (Impressum / Datenschutz) ---------- */
.page-banner{background:var(--braun);height:106px;display:flex;align-items:center;justify-content:center}
.page-banner h1{color:var(--weiss);font-family:var(--font-roboto);font-weight:400;font-size:36px;line-height:1;margin-top:-2px}
.page-content{background:var(--weiss);padding:54px 0 38px}
.page-content h2{font-weight:400;color:var(--braun);font-size:26.5px;line-height:30px;margin:-4px 0 13px}
.page-content p{margin-bottom:12px}
.page-content .gap{margin-top:26px}
.legal h3{font-weight:400;color:var(--braun);font-size:18px;line-height:24px;margin:26px 0 9px}
.legal h4{font-size:14px;font-weight:700;margin:17px 0 6px}
.legal ul{margin:0 0 9px;padding-left:22px}
.legal li{margin-bottom:3px}
.legal a{color:var(--braun);word-break:break-word}

/* ---------- Responsiv (unterhalb der Referenzbreite) ---------- */
@media (max-width:820px){
  body{font-size:14px;line-height:21px}
  .container{padding:0 16px}
  .site-header{height:auto;padding-bottom:12px}
  .hero{height:220px}
  .intro h1{margin-left:0;font-size:24px;line-height:30px}
  .intro-grid{grid-template-columns:1fr;margin-top:28px}
  .intro-badge{height:200px}
  .intro-badge img{position:static;margin:20px auto 0;width:180px}
  .leistungen h2{font-size:21px;line-height:27px}
  .check-list{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
  .check-list li,.check-list li:nth-child(n+5){height:auto;padding:0 0 12px 0}
  .check-list span{line-height:20px}
  .ding{font-size:24px;line-height:32px;margin-top:40px}
  .bildleiste{padding:30px 16px}
  .bildleiste .grid{grid-template-columns:1fr;gap:16px}
  .bildleiste img{height:180px}
  .boxen{grid-template-columns:1fr;gap:40px;justify-content:stretch}
  .box{height:auto;padding-bottom:22px}
  .region-link a{font-size:18px;line-height:26px}
  .karte .hotspot{left:50%;transform:translateX(-50%);top:auto;bottom:10px}
  .site-footer,.site-footer .container{height:auto}
  .site-footer .container{flex-direction:column;align-items:flex-start;padding:10px 16px}
  .site-footer .copy{margin:0}
  .site-footer nav a{height:34px;padding:0 13px 0 0}
  .kontakt-tab{font-size:13px;white-space:nowrap;padding:0 14px}
  .page-content h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}