:root{
  /* Warme Naturtöne. Nicht aus dem Logo abgeleitet — das Weinrot bleibt dem Logo. */
  --sand:#F2EADD;
  --papier:#FBF7F1;
  --erde:#2E2620;
  --erde-hell:#6B5F52;
  --lehm:#B4794A;
  --lehm-dunkel:#8E5A32;
  --moos:#6B7355;
  --moos-dunkel:#4E5940;
  --linie:rgba(46,38,32,.16);
  --logo-rot:#7E2A36;

  --t--1:clamp(.86rem,.84rem + .1vw,.94rem);
  --t-0:clamp(1.04rem,1rem + .18vw,1.14rem);
  --t-1:clamp(1.16rem,1.06rem + .4vw,1.4rem);
  --t-2:clamp(1.5rem,1.2rem + 1.3vw,2.25rem);
  --t-3:clamp(1.95rem,1.4rem + 2.6vw,3.4rem);
  --space:clamp(1.4rem,1.1rem + 1.5vw,2.5rem);
  --edge:clamp(1.15rem,.7rem + 2.4vw,3rem);
}
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dt,dd,table,th,td{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Source Sans 3',system-ui,sans-serif;
  font-size:var(--t-0);line-height:1.68;
  color:var(--erde);background:var(--sand);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
a{color:var(--lehm-dunkel);}
h1,h2,h3{font-family:'Bitter',Georgia,serif;font-weight:700;line-height:1.18;letter-spacing:-.012em;}
:focus-visible{outline:3px solid var(--moos-dunkel);outline-offset:3px;border-radius:2px;}
[id]{scroll-margin-top:5.5rem;}

.wrap{width:min(72rem,100%);margin-inline:auto;padding-inline:var(--edge);}
.auge{font-size:var(--t--1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lehm-dunkel);}

/* Sprungmarke */
.skip{position:absolute;left:-9999px;background:var(--erde);color:#fff;padding:.8rem 1.2rem;z-index:300;font-weight:700;}
.skip:focus{left:.5rem;top:.5rem;}

/* ── Hinweisleiste zur Verfügbarkeit ── */
.hinweis{background:var(--lehm);color:#fff;font-size:var(--t--1);font-weight:600;}
.hinweis__in{
  width:min(72rem,100%);margin-inline:auto;padding:.7rem var(--edge);
  display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline;justify-content:center;text-align:center;
}
.hinweis a{color:#fff;text-decoration:underline;text-underline-offset:3px;}

/* ── Kopf ── */
.kopf{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--sand) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);}
.kopf__in{
  width:min(72rem,100%);margin-inline:auto;padding:.7rem var(--edge);
  display:flex;align-items:center;gap:.8rem var(--space);flex-wrap:wrap;
}
.marke{display:block;flex:0 0 auto;width:clamp(11rem,26vw,15rem);}
.marke svg{width:100%;height:auto;display:block;}
.menu{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:var(--t--1);font-weight:700;}
.menu a{color:var(--erde-hell);text-decoration:none;padding-block:.25rem;border-bottom:2px solid transparent;}
.menu a:hover{color:var(--erde);border-bottom-color:var(--lehm);}
.menu a[aria-current="page"]{color:var(--erde);border-bottom-color:var(--lehm-dunkel);}
.ruf{
  margin-inline-start:auto;background:var(--moos-dunkel);color:#fff;text-decoration:none;
  font-weight:700;font-size:var(--t-0);padding:.7rem 1.2rem;border-radius:.4rem;white-space:nowrap;
}
.ruf:hover{background:var(--erde);}
.ruf small{display:block;font-size:.72em;font-weight:600;opacity:.85;letter-spacing:.04em;}

/* ── Hero ── */
.auftakt{padding-block:clamp(1.75rem,1.25rem + 2.5vw,3.25rem) 0;}
.auftakt__grid{display:grid;gap:var(--space);grid-template-columns:1fr;align-items:center;}
@media (min-width:58rem){.auftakt__grid{grid-template-columns:1.02fr .98fr;}}
.auftakt h1{font-size:var(--t-3);max-width:22ch;margin-top:.9rem;}
.auftakt h1 em{font-style:normal;color:var(--lehm-dunkel);}
.auftakt__lede{margin-top:1.2rem;max-width:46ch;font-size:var(--t-1);line-height:1.5;color:var(--erde-hell);}
.auftakt__reihe{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.75rem;}

.knopf{
  display:inline-block;background:var(--erde);color:var(--papier);text-decoration:none;
  font-weight:700;padding:.9rem 1.6rem;border-radius:.4rem;
}
.knopf:hover{background:var(--lehm-dunkel);}
.knopf-linie{
  display:inline-block;text-decoration:none;color:var(--erde);
  font-weight:700;padding:.9rem 1.6rem;border:2px solid var(--erde);border-radius:.4rem;
}
.knopf-linie:hover{background:var(--papier);}

/* ── Abschnitte ── */
.feld{padding-block:clamp(2.5rem,2rem + 3.5vw,4.75rem);border-top:1px solid var(--linie);}
.feld--papier{background:var(--papier);}
.feld--erde{background:var(--erde);color:var(--sand);}
.feld--erde .auge{color:var(--lehm);}
.feld__kopf{max-width:54ch;}
.feld__kopf h2{font-size:var(--t-2);margin-top:.6rem;}
.feld__kopf p{margin-top:.85rem;color:var(--erde-hell);}
.feld--erde .feld__kopf p{color:rgba(242,234,221,.8);}

/* ── Leistungskarten ── */
.dienste{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);}
@media (min-width:40rem){.dienste{grid-template-columns:1fr 1fr;}}
@media (min-width:64rem){.dienste{grid-template-columns:repeat(3,1fr);}}
.dienst{
  background:var(--papier);border:1px solid var(--linie);border-radius:.5rem;
  display:flex;flex-direction:column;overflow:hidden;
}
.feld--papier .dienst{background:var(--sand);}
.dienst img{width:100%;height:11rem;object-fit:cover;}
.dienst__leib{padding:1.25rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.dienst h3{font-size:var(--t-1);}
.dienst p{font-size:var(--t--1);color:var(--erde-hell);}
.dienst__preis{
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--linie);
  font-weight:700;font-size:var(--t-0);
}

/* ── Status-Kennzeichnung ── */
.status{
  display:inline-block;font-size:var(--t--1);font-weight:700;
  padding:.2rem .6rem;border-radius:.25rem;letter-spacing:.02em;
}
.status--jetzt{background:var(--moos);color:#fff;}
.status--spaeter{background:var(--lehm);color:#fff;}

/* ── Signatur: Geräte- und Preistafel ── */
.tafel{margin-top:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);border-top:2px solid var(--erde);}
.posten{
  padding-block:1.25rem;border-bottom:1px solid var(--linie);
  display:grid;gap:.5rem;grid-template-columns:1fr;
}
@media (min-width:52rem){
  .posten{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;column-gap:var(--space);align-items:baseline;}
}
.posten__name{font-family:'Bitter',serif;font-weight:700;font-size:var(--t-1);}
.posten__detail{font-size:var(--t--1);color:var(--erde-hell);}
.posten__preis{font-weight:700;font-size:var(--t-1);white-space:nowrap;}
.posten__preis small{display:block;font-size:.62em;font-weight:600;color:var(--erde-hell);white-space:normal;}
.tafel__fuss{margin-top:1.2rem;font-size:var(--t--1);color:var(--erde-hell);max-width:60ch;}

/* ── Maschinen ── */
.park{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);}
@media (min-width:52rem){.park{grid-template-columns:1fr 1fr;}}
.maschine{background:var(--papier);border:1px solid var(--linie);border-radius:.5rem;overflow:hidden;}
.feld--papier .maschine{background:var(--sand);}
.maschine img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.maschine__leib{padding:1.35rem;}
.maschine h3{font-size:var(--t-1);}
.maschine__typ{font-size:var(--t--1);color:var(--lehm-dunkel);font-weight:700;margin-top:.15rem;}
.maschine p{margin-top:.7rem;font-size:var(--t--1);color:var(--erde-hell);}
.maschine__zeile{
  margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
}

/* ── Ablauf ── */
.schritte{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);counter-reset:s;}
@media (min-width:52rem){.schritte{grid-template-columns:repeat(3,1fr);}}
.schritt{counter-increment:s;border-top:3px solid var(--lehm);padding-top:1rem;}
.schritt::before{
  content:counter(s);font-family:'Bitter',serif;font-weight:700;font-size:var(--t-2);
  color:var(--lehm);display:block;line-height:1;margin-bottom:.35rem;
}
.schritt h3{font-size:var(--t-1);}
.schritt p{margin-top:.5rem;font-size:var(--t--1);color:var(--erde-hell);}

/* ── Kontaktblock ── */
.zwei{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);}
@media (min-width:46rem){.zwei{grid-template-columns:1fr 1fr;}}
.karte{background:var(--papier);border:1px solid var(--linie);border-radius:.5rem;padding:1.5rem;}
.feld--papier .karte{background:var(--sand);}
.feld--erde .karte{background:rgba(251,247,241,.07);border-color:rgba(242,234,221,.22);}
.karte h3{font-size:var(--t-1);}
.karte__zeile{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;border-bottom:1px solid var(--linie);font-size:var(--t--1);}
.feld--erde .karte__zeile{border-bottom-color:rgba(242,234,221,.18);}
.karte__zeile span:last-child{font-weight:700;text-align:right;}
.karte__gross{margin-top:1rem;font-family:'Bitter',serif;font-weight:700;font-size:var(--t-1);}

/* ── Fließtext für Rechtsseiten ── */
.recht{max-width:60ch;}
.recht h2{font-size:var(--t-2);margin-top:2.25rem;}
.recht h3{font-size:var(--t-1);margin-top:1.6rem;}
.recht p{margin-top:.9rem;}
.recht ul{margin-top:.9rem;display:grid;gap:.45rem;}
.recht li{padding-left:1.1rem;position:relative;}
.recht li::before{content:"–";position:absolute;left:0;color:var(--lehm-dunkel);}
.recht dl{margin-top:.9rem;display:grid;gap:.35rem;}
@media (min-width:34rem){.recht dl{grid-template-columns:auto 1fr;column-gap:1.5rem;}}
.recht dt{font-weight:700;}
.luecke{
  background:#FFF4D6;border:2px dashed var(--lehm-dunkel);border-radius:.4rem;
  padding:1rem 1.15rem;margin-top:1.25rem;font-size:var(--t--1);
}
.luecke strong{color:var(--lehm-dunkel);}

/* ── Fuß ── */
.fuss{background:var(--erde);color:rgba(242,234,221,.72);padding-block:2.5rem;font-size:var(--t--1);}
.fuss a{color:var(--lehm);}
.fuss__menu{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;margin-bottom:1.35rem;font-weight:700;}
.fuss p + p{margin-top:.5rem;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;}
}

/* ── Bilderschau auf der Startseite ────────────────────────────────
   Grundlage ist eine waagerecht scrollbare Spur mit Scroll-Snap.
   Ohne JavaScript bleibt sie als wischbare Galerie voll benutzbar;
   Pfeile, Punkte und der automatische Wechsel kommen per Skript dazu. */
.schau{position:relative;margin-top:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);}
.schau__spur{
  /* Flexbox statt Grid: grid-auto-flow:column in einem scrollbaren Grid
     legt die Folien in Safari untereinander statt nebeneinander. */
  display:flex;flex-wrap:nowrap;
  gap:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;   /* weiches Scrollen steuert das Skript, nicht das CSS */
  border-radius:.5rem;background:var(--erde);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.schau__spur::-webkit-scrollbar{display:none;}
.schau__spur:focus-visible{outline:3px solid var(--lehm);outline-offset:3px;}
.schau__bild{margin:0;scroll-snap-align:center;position:relative;
  flex:0 0 100%;width:100%;max-width:100%;min-width:0;}
.schau__bild img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
}
.schau__bild figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.5rem .9rem .8rem;
  background:linear-gradient(to top,rgba(46,38,32,.86),rgba(46,38,32,0));
  color:var(--sand);font-size:var(--t--1);line-height:1.45;
}

/* Pfeile */
.schau__pfeil{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.9rem;height:2.9rem;border-radius:50%;
  border:2px solid var(--erde);background:var(--papier);color:var(--erde);
  display:none;place-items:center;cursor:pointer;padding:0;
  font-size:1.1rem;line-height:1;
}
.schau[data-bereit] .schau__pfeil{display:grid;}
.schau__pfeil:hover{background:var(--lehm);border-color:var(--lehm);color:var(--papier);}
.schau__pfeil:disabled{opacity:.35;cursor:default;}
.schau__pfeil:disabled:hover{background:var(--papier);border-color:var(--erde);color:var(--erde);}
.schau__pfeil--zurueck{left:.6rem;}
.schau__pfeil--vor{right:.6rem;}
@media (min-width:48rem){
  .schau__pfeil--zurueck{left:-1.45rem;}
  .schau__pfeil--vor{right:-1.45rem;}
}

/* Leiste unter der Schau */
.schau__leiste{
  display:none;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:.9rem;
}
.schau[data-bereit] .schau__leiste{display:flex;}
.schau__punkte{display:flex;gap:.45rem;flex-wrap:wrap;}
.schau__punkt{
  width:.75rem;height:.75rem;border-radius:50%;padding:0;cursor:pointer;
  border:2px solid var(--erde-hell);background:transparent;
}
.schau__punkt[aria-current="true"]{background:var(--erde);border-color:var(--erde);}
.schau__punkt:focus-visible{outline:2px solid var(--lehm);outline-offset:2px;}
.schau__halt{
  margin-inline-start:auto;background:none;border:0;padding:.2rem .1rem;cursor:pointer;
  font:inherit;font-size:var(--t--1);font-weight:700;color:var(--erde-hell);
  text-decoration:underline;text-underline-offset:3px;
}
.schau__halt:hover{color:var(--erde);}
.schau__stand{font-size:var(--t--1);color:var(--erde-hell);}


/* Im Auftakt ist die Spalte schmal: Pfeile bleiben innerhalb des Bildes,
   sonst ragen sie in die Textspalte. */
.schau--auftakt{margin-top:0;}
.schau--auftakt .schau__pfeil--zurueck{left:.6rem;}
.schau--auftakt .schau__pfeil--vor{right:.6rem;}
.schau--auftakt .schau__bild figcaption{padding:2.2rem .8rem .7rem;}

/* ── Menüknopf ────────────────────────────────────────────────
   Zweite Stufe unter dem grünen Anrufen-Knopf: umrandet statt gefüllt,
   damit die Rangfolge im Kopf erhalten bleibt. */
.menu-knopf{
  display:inline-block;text-decoration:none;
  color:var(--lehm-dunkel);background:transparent;
  font-weight:700;font-size:var(--t--1);line-height:1.2;
  padding:.5rem .9rem;border:2px solid var(--lehm);border-radius:.4rem;
  white-space:nowrap;
}
/* .menu a[aria-current] ist spezifischer als eine reine Klasse — deshalb hier
   ebenfalls über .menu, sonst bleibt die Schrift dunkel auf dunklem Grund. */
.menu a.menu-knopf{color:var(--lehm-dunkel);border-bottom:2px solid var(--lehm);}
.menu a.menu-knopf:hover{background:var(--lehm);border-color:var(--lehm);color:#fff;}
.menu a.menu-knopf[aria-current="page"]{
  background:var(--lehm-dunkel);border-color:var(--lehm-dunkel);color:#fff;}

/* Vierer-Raster für Gruppen mit vier Einträgen — sonst stünde
   der vierte Eintrag im Dreier-Raster allein in der zweiten Zeile. */
.vierer{display:grid;gap:var(--space);grid-template-columns:1fr;
  margin-top:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);}
@media (min-width:38rem){.vierer{grid-template-columns:1fr 1fr;}}
@media (min-width:66rem){.vierer{grid-template-columns:repeat(4,1fr);}}
/* Auf schmalen Bildschirmen klebt der Kopf oben und ist ohnehin hoch —
   dort bekommt der Knopf weniger Luft. */
@media (max-width:47.99rem){
  .menu a.menu-knopf{padding:.35rem .7rem;}
}

/* ── Technische Daten ────────────────────────────────────── */
.daten{width:100%;border-collapse:collapse;margin-top:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
  font-size:var(--t--1);}
.daten caption{text-align:left;color:var(--erde-hell);padding-bottom:.7rem;}
.daten th,.daten td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linie);}
.daten th{font-weight:600;color:var(--erde-hell);width:55%;}
.daten td{font-weight:700;white-space:nowrap;}
.daten tr:nth-child(odd) th,.daten tr:nth-child(odd) td{background:var(--papier);}
.feld--papier .daten tr:nth-child(odd) th,
.feld--papier .daten tr:nth-child(odd) td{background:var(--sand);}
.datenblatt{margin-top:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);}
.datenblatt img{width:100%;height:auto;border:1px solid var(--linie);border-radius:.5rem;background:#fff;}
.datenblatt figcaption{margin-top:.7rem;font-size:var(--t--1);color:var(--erde-hell);}
@media (min-width:56rem){
  .daten-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:var(--space);align-items:start;}
  .daten-grid .daten{margin-top:0;}
  .daten-grid .datenblatt{margin-top:0;}
}
.datenblatt a{display:block;}
.datenblatt figcaption a{display:inline;color:var(--lehm-dunkel);font-weight:700;}