/* ===============================================================
   Wiesengut + Rasenpflege-Wichtel
   Gemeinsames Stylesheet, zwei Markenwelten über body.wg / body.rw
   =============================================================== */

:root{
  /* Wiesengut: warm, natürlich */
  --cream:#faf6ec;
  --paper:#fffdf7;
  --green:#14402a;
  --green-2:#215c3c;
  --green-3:#2f7a4f;
  --ochre:#c8892c;
  --ink:#182420;
  --muted:#6b746e;
  --line:#e3dbca;

  /* Rasenpflege-Wichtel: dunkel, professionell */
  --dark:#06120d;
  --dark-2:#0d211a;
  --lime:#8cc63f;
  --lime-2:#a5d95c;

  --radius-s:8px;
  --radius:12px;
  --radius-l:18px;
  --shadow-s:0 2px 8px rgba(16,36,25,.06);
  --shadow:0 14px 34px -14px rgba(16,36,25,.28);
  --shadow-l:0 30px 70px -28px rgba(16,36,25,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1280px;   /* ruhige Lesebreite; der Adminbereich nutzt weiter die volle Breite */

  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden: hidden macht den Body zum Scrollbereich und kann
     position:sticky aushebeln. clip verhindert nur den Ueberlauf. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.16;letter-spacing:-.018em;margin:0 0 .45em;font-weight:800}
h1{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h2{font-size:clamp(1.35rem,2.4vw,1.9rem)}
h3{font-size:1.06rem;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{width:min(var(--maxw),calc(100% - 40px));margin-inline:auto}
.lead{font-size:1.02rem;color:var(--muted);max-width:66ch}
/* Fliesstext bleibt begrenzt - volle Breite gilt fuer Raster und Bilder,
   nicht fuer Absaetze. Ueberlange Zeilen liest niemand. */
.section > .wrap > p,.pagehead p:not(.lead){max-width:72ch}
.small{font-size:.87rem;color:var(--muted);line-height:1.5}
.eyebrow{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-3);margin-bottom:.7em;
}
.rw .eyebrow{color:var(--lime)}

:focus-visible{outline:3px solid var(--green-3);outline-offset:3px;border-radius:4px}
.rw :focus-visible{outline-color:var(--lime)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:#fff;color:var(--green);padding:10px 16px;border-radius:8px}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:11px 21px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;font-weight:700;font-size:.92rem;letter-spacing:.005em;
  cursor:pointer;background:var(--green);color:#fff;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
  box-shadow:0 8px 20px -10px rgba(20,64,42,.7);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(20,64,42,.65)}
.btn:active{transform:translateY(0)}
.rw .btn{background:var(--lime);color:#08170e;box-shadow:0 8px 22px -10px rgba(140,198,63,.8)}
.rw .btn:hover{background:var(--lime-2)}
.btn.light{background:#fff;color:var(--green);box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
.btn.light:hover{background:#fff}
.btn.ghost{background:transparent;border-color:currentColor;color:inherit;box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.btn.dark{background:transparent;border-color:var(--green);color:var(--green);box-shadow:none}
.btn.dark:hover{background:var(--green);color:#fff}
.btn.sm{padding:7px 14px;font-size:.83rem}

/* ---------------------------------------------------------------
   Kopfbereich
   --------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:60;
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
  backdrop-filter:saturate(1.4) blur(12px);
}
.wg .header{background:rgba(255,255,255,.93);border-bottom:1px solid var(--line)}
.rw .header{background:rgba(6,18,13,.86);color:#fff;border-bottom:1px solid rgba(255,255,255,.09)}
.header.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header.scrolled .nav{height:56px;transition:height .3s var(--ease)}
.brandlink{display:flex;align-items:center;flex:0 0 auto}
.logo{height:44px;max-width:210px;object-fit:contain;transition:height .3s var(--ease)}
.header.scrolled .logo{height:36px}
.nav nav{display:flex;gap:6px;align-items:center}
.nav nav a{
  position:relative;text-decoration:none;font-weight:650;font-size:.9rem;
  padding:8px 12px;border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease);
}
.wg .nav nav a:hover{background:rgba(20,64,42,.08);color:var(--green)}
.rw .nav nav a:hover{background:rgba(255,255,255,.1)}
.nav nav a.navcta{background:var(--green);color:#fff;padding:9px 17px;margin-left:6px}
.rw .nav nav a.navcta{background:var(--lime);color:#08170e}
.nav nav a.navcta:hover{opacity:.92}
.menu{
  display:none;width:44px;height:44px;border:0;border-radius:12px;
  background:transparent;color:inherit;cursor:pointer;position:relative;
}
.menu span,.menu span::before,.menu span::after{
  content:"";position:absolute;left:12px;width:20px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .28s var(--ease),opacity .18s linear;
}
.menu span{top:21px}
.menu span::before{top:-6px;left:0}
.menu span::after{top:6px;left:0}
.menu[aria-expanded="true"] span{background:transparent}
.menu[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------
   Titelbanner: Bild wird IMMER vollstaendig gezeigt, nie beschnitten
   --------------------------------------------------------------- */
.banner{display:block;background:var(--green);line-height:0}
.rw .banner{background:var(--dark)}
.banner img{
  display:block;width:100%;height:auto;margin-inline:auto;
  max-width:var(--maxw);max-height:min(68vh,655px);object-fit:contain;
}
.introband{padding:clamp(24px,3.2vw,40px) 0;background:var(--paper);border-bottom:1px solid var(--line)}
.rw .introband{background:var(--dark);color:#fff;border-bottom-color:rgba(255,255,255,.08)}
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:end}
.intro h1{margin:0;font-size:clamp(1.6rem,3vw,2.3rem);text-wrap:balance}
.rw .intro h1{color:#fff}
.rw .intro .lead{color:rgba(255,255,255,.76)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.intro .cta{margin-top:16px}

/* ---------------------------------------------------------------
   Abschnitte
   --------------------------------------------------------------- */
.section{padding:clamp(38px,5vw,62px) 0}
.section.tint{background:var(--paper)}
.rw .section.tint{background:#fff}
.rw{background:#f4f6f3}
.sectionhead{max-width:70ch;margin-bottom:clamp(20px,2.6vw,30px)}
.pagehead{padding:clamp(28px,4vw,46px) 0 clamp(14px,2vw,22px)}
.pagehead h1{text-wrap:balance}
.pagehead+.section{padding-top:clamp(16px,2vw,24px)}

/* Kompakter Seitenkopf und mitlaufende Kategorieleiste.
   Beim Blättern durch das Sortiment bleibt der Kategoriewechsel erreichbar. */
.pagehead.schmal{padding:clamp(26px,4vw,44px) 0 clamp(14px,2vw,22px)}
.pagehead.schmal h1{font-size:clamp(1.7rem,3.6vw,2.7rem);margin-bottom:.18em}
.pagehead.schmal .eyebrow{margin-bottom:.5em}
.pagehead.schmal .lead{font-size:1rem}

.filterbar{
  /* --kopf wird von site.js gesetzt und folgt der Kopfzeile in beiden Zustaenden */
  position:sticky;top:var(--kopf,60px);z-index:30;
  background:rgba(250,246,236,.95);backdrop-filter:saturate(1.3) blur(9px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.filterbar .tabs{
  margin:0;padding:9px 0;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.filterbar .tabs::-webkit-scrollbar{height:0}
.filterbar .tab{flex:0 0 auto;padding:7px 15px;font-size:.88rem}
.filterbar + .section{padding-top:clamp(22px,3vw,36px)}
@media(max-width:860px){
  .filterbar .tabs{padding:8px 0}
}

/* Karten-Raster */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{
  background:#fff;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.rw .card{border-color:#dfe5e0}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.card>img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#eee9dd;transition:transform .5s var(--ease)}
.card:hover>img{transform:scale(1.045)}
.card .pad{padding:16px 18px 19px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .pad small{color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.card h3{margin:0}
.card p{color:var(--muted);font-size:.9rem}
.price{margin-top:auto;padding-top:10px;font-size:1.2rem;font-weight:800;color:var(--green);letter-spacing:-.02em}
.badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;background:#e7f3ea;color:#1f6b41;
  font-size:.76rem;font-weight:800;letter-spacing:.03em;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.off{background:#f8e4e4;color:#94302f}

/* ---------------------------------------------------------------
   Produktraster im Shop-Stil: kompakte Kacheln, Bild nicht beschnitten
   --------------------------------------------------------------- */
.productgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(182px,1fr));gap:14px}
.product{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.product:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.product .media{
  position:relative;aspect-ratio:1/1;background:#fff;padding:11px;
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);
}
.product .media img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .4s var(--ease);
}
.product:hover .media img{transform:scale(1.05)}
.flag{
  position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:7px;
  background:#94302f;color:#fff;font-size:.68rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
.pinfo{padding:11px 12px 13px;display:flex;flex-direction:column;gap:3px;flex:1}
.pcat{font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.product h3{font-size:.94rem;line-height:1.3;margin:0}
.pdesc{font-size:.85rem;line-height:1.45;color:var(--muted);margin:3px 0 0}
.prow{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.product .price{margin:0;padding:0;font-size:1.04rem}
.pstock{font-size:.75rem;font-weight:700;color:#2f7a4f;white-space:nowrap}
.pstock.off{color:#94302f}

/* Leistungskarten: Bild mit Textauflage */
.service-card{position:relative;border:0;background:var(--dark);color:#fff;min-height:255px}
.service-card>img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;opacity:.62}
.service-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,18,13,.05) 30%,rgba(6,18,13,.93));
}
.service-card .pad{position:relative;z-index:1;margin-top:auto;padding:20px}
.service-card h3{font-size:1.15rem}
.service-card p{color:rgba(255,255,255,.82)}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}

.more{margin-top:24px}

/* Automatenstandorte */
.machines{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:18px}
.machine{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-s);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.machine:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.machine>img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#eee9dd}
.machine .pad{padding:16px 18px 19px;display:flex;flex-direction:column;gap:10px;flex:1}
.machine h3{margin:0 0 4px}
.machine .infoline{font-size:.9rem;color:var(--ink)}
.machine .infoline svg{color:var(--green-3)}
.machine .more{margin-top:auto;padding-top:6px}
.checkmap{display:inline-block;margin-top:6px;font-size:.78rem;font-weight:700;color:var(--green-3);text-decoration:underline}

/* Merkmalsleiste */
.featurebar{border-block:1px solid var(--line);background:var(--paper)}
.rw .featurebar{background:var(--dark);border-color:rgba(255,255,255,.08);color:#fff}
.featurebar .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.feature{padding:22px 18px;text-align:center;border-left:1px solid var(--line)}
.rw .feature{border-color:rgba(255,255,255,.09)}
.feature:first-child{border-left:0}
.feature svg{width:22px;height:22px;margin-bottom:7px;color:var(--green-3)}
.rw .feature svg{color:var(--lime)}
.feature strong{display:block;font-size:.95rem;margin-bottom:1px}
.feature span{font-size:.84rem;color:var(--muted)}
.rw .feature span{color:rgba(255,255,255,.68)}

/* Kategorie-Filter / Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.tab{
  padding:7px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);
  text-decoration:none;font-weight:650;font-size:.86rem;color:var(--muted);
  transition:all .2s var(--ease);
}
.tab:hover{border-color:var(--green-3);color:var(--green)}
.tab.active{background:var(--green);border-color:var(--green);color:#fff}

/* Zwei Spalten (Kontakt) */
.cols2{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1fr);gap:26px;align-items:start}
/* Nur im zweispaltigen Layout mitlaufen lassen. Einspaltig steht die Karte
   ueber dem Formular und wuerde beim Scrollen die Eingabefelder verdecken. */
@media(min-width:1001px){
  .cols2 .infocard{position:sticky;top:86px}
}

/* Info-Karte */
.infocard{background:var(--green);color:#fff;border:0}
.rw .infocard{background:var(--dark)}
.infocard h2{color:#fff}
.infocard a{color:#fff}
.infocard .pad{gap:11px;padding:22px}
.infoline{display:flex;gap:10px;align-items:flex-start;font-size:.94rem}
.infoline svg{width:17px;height:17px;flex:0 0 auto;margin-top:4px;opacity:.72}
.maplink{
  display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  font-size:.88rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;
  opacity:.85;transition:opacity .2s var(--ease);
}
.maplink:hover{opacity:1}
.footer .foot a{text-decoration:none}
.footer .foot a:hover{text-decoration:underline}

/* ---------------------------------------------------------------
   Fußbereich
   --------------------------------------------------------------- */
.footer{padding:clamp(30px,4vw,48px) 0 24px;color:#fff}
.wg .footer{background:var(--green)}
.rw .footer{background:var(--dark)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px;max-width:1400px}
.foot strong{display:block;font-size:.97rem;margin-bottom:8px}
.foot p,.foot a{color:rgba(255,255,255,.76);font-size:.9rem}
.foot a{text-decoration:none;transition:color .2s}
.foot a:hover{color:#fff;text-decoration:underline}
.footbottom{
  margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.86rem;color:rgba(255,255,255,.55);
}

/* ---------------------------------------------------------------
   Markenübersicht (Startseite)
   --------------------------------------------------------------- */
.master{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#06120d}
.brandpane{
  position:relative;min-height:100vh;display:flex;align-items:flex-end;
  padding:clamp(26px,3.6vw,48px);color:#fff;text-decoration:none;overflow:hidden;
  background-size:cover;background-position:center;
}
.brandpane::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,.82));
  transition:background .4s var(--ease);
}
.brandpane:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.05) 15%,rgba(0,0,0,.88))}
.brandpane>div{position:relative;max-width:520px;transform:translateY(0);transition:transform .4s var(--ease)}
.brandpane:hover>div{transform:translateY(-8px)}
.brandpane h1{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:.25em}
.brandpane p{font-size:.98rem;color:rgba(255,255,255,.85);margin-bottom:20px}
.masterfoot{
  background:#06120d;color:rgba(255,255,255,.5);padding:18px;
  text-align:center;font-size:.88rem;
}
.masterfoot a{color:inherit;margin:0 12px;text-decoration:none}
.masterfoot a:hover{color:#fff;text-decoration:underline}

/* ---------------------------------------------------------------
   Formulare
   --------------------------------------------------------------- */
.form{
  background:#fff;padding:clamp(18px,2.4vw,26px);border-radius:var(--radius-l);
  border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.form h2{font-size:1.15rem;margin:30px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
.form h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.field{margin-bottom:13px}
label{display:block;font-weight:700;font-size:.93rem;margin-bottom:7px}
label small{display:block;font-weight:400;color:var(--muted);margin-top:5px}
label.inline{display:inline-flex;align-items:center;gap:9px;font-weight:650;margin-top:6px}
input,textarea,select{
  width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:var(--radius-s);
  font:inherit;font-size:.93rem;color:inherit;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
input:focus,textarea:focus,select:focus{
  outline:0;border-color:var(--green-3);box-shadow:0 0 0 4px rgba(47,122,79,.13);
}
textarea{min-height:120px;resize:vertical}
input[type=file]{padding:11px;background:var(--paper)}
.check{width:auto;padding:0;accent-color:var(--green)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.loginform{max-width:440px;margin:8vh auto 0}
.notice{
  padding:14px 17px;border-radius:var(--radius-s);background:#e7f3ea;color:#1c5c38;
  margin:0 0 18px;font-size:.95rem;border-left:4px solid #3d8f5d;
}
.notice.error{background:#fbe9e9;color:#8d2b2b;border-left-color:#c04a4a}
.notice code{background:rgba(0,0,0,.07);padding:1px 6px;border-radius:5px;font-size:.9em}

/* Rechtstexte */
.legal{max-width:78ch}
.legal h2{font-size:1.12rem;margin:30px 0 8px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--muted)}

/* ---------------------------------------------------------------
   Adminbereich
   --------------------------------------------------------------- */
.adminbody{background:#eef1ee;color:var(--ink)}
/* Der Admin braucht die volle Breite fuer die Tabellen, die Website nicht. */
.adminbody .wrap{width:min(1720px,calc(100% - 32px))}
/* Eingabeformulare bleiben lesbar schmal, Tabellen duerfen die volle Breite nutzen */
.adminbody .form:not(.loginform){max-width:920px}
.adminbar{background:#0f2a1d;color:#fff;padding:0;position:sticky;top:0;z-index:50}
.adminbar .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-height:62px}
.adminbar strong{margin-right:20px;letter-spacing:.13em;font-size:.8rem;opacity:.75}
.adminbar a{
  color:rgba(255,255,255,.82);text-decoration:none;padding:9px 14px;border-radius:8px;
  font-size:.93rem;font-weight:650;transition:background .2s,color .2s;
}
.adminbar a:hover{background:rgba(255,255,255,.12);color:#fff}
.adminmain{padding:38px 0 70px}
/* Navigation: zwei Aufklappmenues direkt in der Kopfleiste */
.adminbar .wrap{position:relative}
.adminbar .barspacer{flex:1}
/* Navigationshuelle: am Schreibtisch eine Reihe, auf dem Handy aufklappbar */
.admnav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.admtoggle{display:none}
.adminbar a.on{background:rgba(255,255,255,.16);color:#fff}

.dd{position:relative}
.dd > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.82);padding:9px 13px;border-radius:8px;
  font-size:.93rem;font-weight:650;white-space:nowrap;user-select:none;
  transition:background .2s,color .2s;
}
.dd > summary::-webkit-details-marker{display:none}
.dd > summary::marker{content:""}
/* Pfeil als gedrehtes Rechteck - unabhaengig davon, welche Zeichen die Schrift kennt */
.dd > summary::after{
  content:"";width:6px;height:6px;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.7;transition:transform .2s var(--ease);
}
.dd > summary:hover{background:rgba(255,255,255,.12);color:#fff}
.dd > summary.on{background:var(--lime);color:#08170e}
.dd[open] > summary{background:rgba(255,255,255,.16);color:#fff}
.dd[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
.dd > summary:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.ddmenu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:230px;
  background:#173627;border:1px solid rgba(255,255,255,.14);border-radius:11px;
  padding:6px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 22px 44px -20px rgba(0,0,0,.85);
}
.ddmenu a{
  color:rgba(255,255,255,.85);text-decoration:none;padding:10px 13px;border-radius:7px;
  font-size:.92rem;font-weight:650;white-space:nowrap;transition:background .2s,color .2s;
}
.ddmenu a:hover{background:rgba(255,255,255,.13);color:#fff}
.ddmenu a.on{background:var(--lime);color:#08170e}
/* Verweise auf die öffentliche Seite optisch absetzen */
.ddmenu a.ddaus{
  border-top:1px solid rgba(255,255,255,.12);margin-top:4px;padding-top:11px;
  color:rgba(255,255,255,.6);font-weight:600;font-size:.86rem;
}

@media(max-width:860px){
  .ddmenu{position:static;box-shadow:none;margin:4px 0 6px;width:100%}
  .dd{width:100%}
  .dd > summary{width:100%;justify-content:space-between}
}

/* Im Admin sind die Website-Abstaende und -Ueberschriften zu gross */
.adminmain .section{padding:32px 0 0}
.adminmain .section h2{font-size:1.3rem;margin-bottom:14px}
.adminmain h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.pagebar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pagebar h1{margin-bottom:2px}
.pagebar p{color:var(--muted);font-size:.94rem;margin:0}
.admgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:14px}
.stat{
  background:#fff;border:1px solid #e2e6e2;border-radius:var(--radius);padding:22px;
  font-size:.86rem;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.stat strong{display:block;font-size:1.9rem;color:var(--ink);margin:6px 0 10px;letter-spacing:-.02em;text-transform:none}
.stat a{color:var(--green);font-weight:700;text-transform:none;letter-spacing:0;font-size:.92rem}
.tablewrap{overflow-x:auto;background:#fff;border:1px solid #e2e6e2;border-radius:var(--radius);box-shadow:var(--shadow-s)}
table{width:100%;border-collapse:collapse;min-width:900px}
th{
  padding:14px 16px;text-align:left;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:#f7f9f7;border-bottom:1px solid #e2e6e2;white-space:nowrap;
}
td{padding:13px 16px;border-bottom:1px solid #eef1ee;vertical-align:middle;font-size:.95rem}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#f9fbf9}
.thumb{width:66px;height:50px;object-fit:cover;border-radius:9px;border:1px solid #e2e6e2;background:#f2f2f2}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions form{margin:0}
.actions .btn{padding:8px 15px;font-size:.86rem;box-shadow:none}
.danger{background:#a12f2f!important;color:#fff!important;box-shadow:none!important}
.danger:hover{background:#8d2727!important}
.adminbody .card{border-color:#e2e6e2}
.adminbody .card:hover{transform:none;box-shadow:var(--shadow-s);border-color:#e2e6e2}

/* ---------------------------------------------------------------
   Direkt bearbeitbare Produkttabelle im Admin
   --------------------------------------------------------------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.edittable{min-width:1180px}
.edittable td{padding:10px 9px;vertical-align:top}
.edittable th{padding:12px 9px}
.edittable input,.edittable textarea{
  padding:8px 10px;font-size:.9rem;border-radius:8px;border:1.5px solid #dfe4df;background:#fff;
}
.edittable input:focus,.edittable textarea:focus{border-color:var(--green-3);box-shadow:0 0 0 3px rgba(47,122,79,.13)}
.edittable textarea{min-height:0;height:56px;resize:vertical;line-height:1.35}
.edittable .sub{margin-top:6px;font-size:.82rem;color:var(--muted);background:#fafbfa}
.edittable .num{text-align:right}
.edittable .c-img{width:118px}
.edittable .c-name{width:210px}
.edittable .c-cat{width:150px}
.edittable .c-desc{width:230px}
.machtable{min-width:1320px}
.edittable .c-num{width:96px}
.edittable .c-chk{width:62px;text-align:center}
.edittable .c-act{width:110px}
.edittable td.c-chk{vertical-align:top;padding-top:17px}
.edittable .check{width:20px;height:20px}
.edittable tbody tr:hover{background:#fafcfa}

/* Klickbares Vorschaubild = Dateiauswahl */
.imgpick{
  display:block;position:relative;width:100px;height:82px;margin:0;cursor:pointer;
  border:1.5px solid #dfe4df;border-radius:10px;overflow:hidden;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.imgpick:hover{border-color:var(--green-3);box-shadow:0 0 0 3px rgba(47,122,79,.13)}
.imgpick img{width:100%;height:100%;object-fit:contain;padding:5px;background:#fff}
.imgpick-hint{
  position:absolute;inset:auto 0 0 0;padding:3px 0;text-align:center;
  background:rgba(15,42,29,.82);color:#fff;font-size:.66rem;font-weight:700;
  letter-spacing:.04em;opacity:0;transition:opacity .2s var(--ease);
}
.imgpick:hover .imgpick-hint,.imgpick:focus-within .imgpick-hint{opacity:1}
[data-file]:focus-visible+.imgpick,.imgpick:focus-within{border-color:var(--green-3)}
.haspick .imgpick{border-color:var(--green-3);box-shadow:0 0 0 3px rgba(47,122,79,.2)}
.haspick .imgpick-hint{opacity:1;background:var(--green-3);content:""}
.rmimg{
  display:flex;align-items:center;gap:5px;margin-top:7px;
  font-size:.74rem;font-weight:600;color:var(--muted);
}
.rmimg input{width:auto;padding:0}

.row-off{opacity:.55}
/* Suchleiste über der Objekttabelle */
.suchleiste{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;
}
.suchfeld{flex:1 1 320px;margin:0}
.suchfeld input{
  width:100%;padding:9px 12px;font-size:.93rem;border-radius:8px;border:1.5px solid var(--line);
}
.suchfeld input:focus{border-color:var(--green-3);box-shadow:0 0 0 3px rgba(47,122,79,.13);outline:0}
.suchschalter{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  font-size:.86rem;font-weight:650;color:var(--ink-2, var(--muted));white-space:nowrap;
}
.suchschalter .check{width:17px;height:17px}
.suchzahl{margin-left:auto;font-size:.83rem;color:var(--muted);font-weight:650;white-space:nowrap}

/* Zugehörige Touren am Objekt */
.tourzelle{vertical-align:middle}
.tourchip{
  display:inline-block;margin:0 4px 4px 0;padding:4px 9px;border-radius:999px;
  background:#e6eefb;color:#28527f;font-size:.74rem;font-weight:700;text-decoration:none;
  white-space:nowrap;
}
.tourchip:hover{background:#d5e3f7}
.tourchip.aus{background:#eceeec;color:#6b746e}
.ohnetour{
  display:inline-block;padding:4px 9px;border-radius:999px;
  background:var(--warn-soft, #faeed8);color:#9c5c00;font-size:.74rem;font-weight:700;white-space:nowrap;
}

/* Objekttabelle enger stellen - sie hat die meisten Spalten */
.objtable{min-width:1420px}
.objtable td{padding:7px 7px}
.objtable th{padding:10px 7px}
.objtable input,.objtable textarea{padding:6px 8px;font-size:.85rem;border-radius:7px}
.objtable textarea{height:44px;line-height:1.3}
.objtable .sub{margin-top:4px}
.objtable .c-cat{width:126px}
.objtable .c-name{width:150px}
.objtable .c-desc{width:170px}
.objtable .c-num{width:74px}
.objtable .c-tour{width:150px}
.objtable .c-bild{width:150px}
.objtable .c-chk{width:48px}
.objtable .c-act{width:88px}
.objtable .geocell{min-width:150px}
.objtable .geoactions{gap:6px;margin-top:4px}
.objtable .geobtn{padding:4px 8px;font-size:.7rem}
.objtable .bildzelle{min-width:140px}
.objtable .bildkachel{width:44px;height:36px}
.objtable .bildzone{padding:6px 8px;gap:3px}
.objtable .bildwahl span{font-size:.68rem;padding:3px 7px}
.objtable .bildhinweis{font-size:.63rem}
.objtable .bildmeldung{font-size:.65rem}

/* Bilder an Objekten: Kacheln plus Einfügefeld */
.edittable .c-bild{width:210px}
.bildzelle{min-width:200px}
.galerie{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.bildkachel{position:relative;display:block;width:58px;height:46px}
.bildkachel img{
  width:100%;height:100%;object-fit:cover;border-radius:7px;
  border:1px solid var(--line);background:#fff;display:block;
}
.bildweg{
  position:absolute;top:-6px;right:-6px;width:19px;height:19px;padding:0;line-height:1;
  border-radius:50%;border:0;cursor:pointer;background:#a12f2f;color:#fff;
  font-size:.82rem;font-weight:700;display:grid;place-items:center;
}
.bildweg:hover{background:#8d2727}
.bildzone{
  border:1.5px dashed var(--line);border-radius:9px;padding:9px 10px;
  display:flex;flex-direction:column;gap:4px;cursor:pointer;background:var(--surface-2, #fafbfa);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.bildzone:hover,.bildzone.aktiv{border-color:var(--green-3);background:#f4fbf6}
.bildzone.bereit{border-color:var(--green);background:#eaf6ee;border-style:solid}
.bildzone.laedt{opacity:.6;cursor:progress}
.bildzone:focus-visible{outline:2px solid var(--green-3);outline-offset:2px}
.bildwahl{margin:0;cursor:pointer}
.bildwahl span{
  display:inline-block;font-size:.74rem;font-weight:700;color:var(--green);
  border:1.5px solid var(--green-3);border-radius:6px;padding:4px 9px;background:#fff;
}
.bildhinweis{font-size:.68rem;color:var(--muted);line-height:1.35}
.bildmeldung{font-size:.7rem;font-weight:600;color:var(--green-3);min-height:.9em;line-height:1.3}
.bildmeldung.fehler{color:#8d2b2b}

/* Adresssuche in der Objekttabelle */
.geocell{min-width:230px}
.geoactions{display:flex;gap:8px;align-items:center;margin-top:6px}
.geobtn{
  font:inherit;font-size:.74rem;font-weight:700;padding:6px 11px;border-radius:7px;cursor:pointer;
  border:1.5px solid var(--green-3);background:#fff;color:var(--green);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.geobtn:hover:not(:disabled){background:var(--green);border-color:var(--green);color:#fff}
.geobtn:disabled{opacity:.55;cursor:progress}
.geocell .checkmap{margin:0}
.geotreffer{
  margin-top:7px;font-size:.76rem;line-height:1.4;color:var(--green);
  background:#eef6f0;border:1px solid #cfe3d6;border-radius:8px;padding:7px 9px;
  display:flex;flex-direction:column;gap:5px;
}
.geotreffer.fehler{color:#8d2b2b;background:#fbeceb;border-color:#f0cfcc}
.geotitel{font-weight:700}
.geowahl{
  font:inherit;font-size:.75rem;text-align:left;line-height:1.35;cursor:pointer;
  background:#fff;border:1px solid #cfe3d6;border-radius:6px;padding:6px 8px;color:var(--ink);
}
.geowahl:hover{border-color:var(--green-3);background:#f6fbf8}
.geocell.gefunden [data-geofield]{border-color:var(--green-3);background:#f4fbf6}

.newrow{background:#f4f8f4}
.newrow td{border-top:2px solid var(--green-3)}
.newrow input::placeholder,.newrow textarea::placeholder{color:#9aa39c}

/* Auswertung: Balkendiagramm und Ranglisten, ohne Fremdbibliothek */
.statsub{display:block;font-size:.78rem;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:2px}
.chartbox{background:#fff;border:1px solid #e2e6e2;border-radius:var(--radius);padding:22px 24px 16px}
.chartlegend{display:flex;gap:18px;margin-bottom:16px;font-size:.84rem;font-weight:700;color:var(--muted)}
.lg{display:inline-flex;align-items:center;gap:7px}
.lg::before{content:"";width:12px;height:12px;border-radius:3px}
.lg-u::before{background:var(--green)}
.lg-v::before{background:#bcd8c5}
.chart{
  display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:3px;
  height:220px;align-items:end;
}
.chart .bar{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.chart .bv,.chart .bu{position:absolute;bottom:0;left:0;right:0;border-radius:4px 4px 0 0;min-height:2px}
.chart .bv{background:#bcd8c5}
.chart .bu{background:var(--green)}
.chart .bar:hover .bv{background:#a8ccb3}
.chart.hours .bv{background:var(--green-3)}
.chartaxis{display:flex;justify-content:space-between;margin-top:10px;font-size:.78rem;color:var(--muted)}
.statcols{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start}
.ranktable{min-width:0}
.ranktable td,.ranktable th{padding:9px 12px;font-size:.9rem}
.ranktable td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ranktable td a{color:var(--green);text-decoration:none}
.ranktable td a:hover{text-decoration:underline}
.barcell{width:110px}
.barcell span{display:block;height:8px;border-radius:4px;background:var(--green-3);opacity:.55}
@media(max-width:1000px){.statcols{grid-template-columns:1fr}}

/* Export-/Import-Kasten */
.tools{display:grid;grid-template-columns:1fr 1.6fr;gap:16px;margin-bottom:20px}
.tool{background:#fff;border:1px solid #e2e6e2;border-radius:var(--radius);padding:18px 20px}
.tool h3{font-size:1rem;margin:0 0 6px}
.tool .small{margin-bottom:12px}
.tool .small:last-child{margin:10px 0 0}
.toolform{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolform input[type=file]{
  width:auto;flex:1 1 240px;padding:8px 10px;font-size:.88rem;
  border:1.5px solid #dfe4df;border-radius:8px;background:#fafbfa;
}

/* Import-Vorschau */
.importtable{min-width:900px}
.importtable td{padding:9px 14px;font-size:.9rem}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em}
.t-insert{background:#e2f0e6;color:#1f6b41}
.t-update{background:#e6eefb;color:#28527f}
.t-same{background:#eceeec;color:#6b746e}
.t-error{background:#f8e0e0;color:#94302f}
.row-error{background:#fdf6f6}
.row-same{color:var(--muted)}
.savebar button[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Speicherleiste */
#prodform{padding-bottom:4px}
.savebar{
  position:sticky;bottom:0;z-index:30;margin-top:18px;
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding:14px 18px;background:#fff;border:1px solid #e2e6e2;border-radius:var(--radius);
  box-shadow:0 -8px 26px -18px rgba(0,0,0,.4);
}
.savebar.active{border-color:var(--green-3);box-shadow:0 -8px 26px -14px rgba(47,122,79,.5)}
.savehint{font-size:.9rem;color:var(--muted);font-weight:600}
.savebar.active .savehint{color:var(--green-3)}

/* ---------------------------------------------------------------
   Fahrerbereich Winterdienst: dunkel, große Flächen, für unterwegs
   --------------------------------------------------------------- */
body.crew{background:#0d1a13;color:#e8efe9;font-size:17px}
.crew .wrap{width:min(720px,calc(100% - 28px))}
.crewbar{background:#0f2a1d;border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:20}
.crewbar .wrap{display:flex;align-items:center;gap:12px;min-height:56px}
.crewhome{font-weight:800;text-decoration:none;color:#fff;font-size:1.02rem;letter-spacing:-.01em}
.crewme{font-size:.85rem;color:rgba(255,255,255,.6);font-weight:700}

/* Restzeit bis zur automatischen Abmeldung */
.crewtimer{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:5px 6px 5px 13px;
}
.crewtimer .tlabel{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.crewtimer .tzeit{font-size:.92rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.crewtimer .tbleib{
  font:inherit;font-size:.7rem;font-weight:700;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:6px 11px;
}
.crewtimer .tbleib:hover{background:rgba(255,255,255,.24)}
.crewtimer.warnung{background:#5c2b12;border-color:#e8833a}
.crewtimer.warnung .tzeit{color:#ffb684}
.crewtimer.warnung .tbleib{background:#e8833a;color:#1a0c02}
.crewtimer .tbleib{white-space:nowrap}
.crewtimer .tkurz{display:none}
@media(max-width:620px){
  .crewtimer .tlabel{display:none}
  .crewtimer{padding-left:11px;gap:6px}
  .crewme{display:none}
  /* Der Knopf wird erst gebraucht, wenn es knapp wird – sonst bricht die Zeile um */
  .crewtimer .tbleib{display:none}
  .crewtimer.warnung .tbleib{display:inline-block}
  .crewtimer .tlang{display:none}
  .crewtimer .tkurz{display:inline}
}
.crewout{font-size:.85rem;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 11px;border-radius:7px;background:rgba(255,255,255,.1)}
.crewmain{padding:22px 0 90px}
.crewh1{font-size:1.65rem;margin:0 0 4px;color:#fff}
.crewsec{font-size:1.05rem;margin:30px 0 12px;color:rgba(255,255,255,.72);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.82rem}
.crewmeta{color:rgba(255,255,255,.6);font-size:.92rem;margin:0 0 18px}
.crewsub{color:rgba(255,255,255,.6);margin-top:-6px}
.crew .notice{background:#14352a;color:#c8e6d3;border-left-color:var(--lime)}
.crew .notice.error{background:#3a1c1c;color:#f2c4c0;border-left-color:#d16a62}

.crewbtn{
  display:block;width:100%;padding:17px 20px;border:0;border-radius:12px;
  background:var(--lime);color:#08170e;font:inherit;font-weight:800;font-size:1.05rem;
  text-align:center;text-decoration:none;cursor:pointer;margin-top:14px;
}
.crewbtn:active{transform:translateY(1px)}
.crewbtn.ghost{background:transparent;border:2px solid rgba(255,255,255,.25);color:#e8efe9}
.crewbtn.ende{background:#e8833a;color:#1a0c02;margin:0}
.crewbtn.start{width:auto;padding:14px 22px;margin:0;flex:0 0 auto}

.crewlogin{max-width:400px;margin:8vh auto 0}
.crewlogin h1{color:#fff;margin-bottom:2px}
.crew .field{margin-bottom:14px}
.crew textarea{min-height:0;height:64px;resize:vertical}
.crew label{color:rgba(255,255,255,.75);font-size:.88rem}
.crew input,.crew select,.crew textarea{
  background:#132a20;border:1.5px solid rgba(255,255,255,.16);color:#eef5f0;
  border-radius:9px;padding:10px 11px;line-height:1.25;
  /* 16px verhindert, dass iOS beim Antippen in die Seite hineinzoomt */
  font-size:16px;
  /* ohne das geben iOS und Safari den Feldern eine eigene, hohe Darstellung */
  -webkit-appearance:none;appearance:none;
  min-height:0;
}
/* Datum und Uhrzeit sind auf dem iPhone sonst deutlich höher als der Rest */
.crew input[type=date],.crew input[type=time]{min-height:44px;padding-top:8px;padding-bottom:8px}
.crew input[type=date]::-webkit-date-and-time-value,
.crew input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0;line-height:1.25}
.crew input[type=date]::-webkit-calendar-picker-indicator,
.crew input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55}
/* eigener Pfeil, weil appearance:none den systemeigenen entfernt */
.crew select{
  padding-right:32px;background-repeat:no-repeat;background-position:right 11px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bcd8c5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  min-height:44px;
}
.crewlogin input{padding:13px 13px;font-size:1rem}
.crewlogin select{padding:13px 34px 13px 12px;font-size:1.02rem;font-weight:700;min-height:52px}
.crew input:focus,.crew select:focus,.crew textarea:focus{
  border-color:var(--lime);box-shadow:0 0 0 3px rgba(140,198,63,.22);outline:0;
}

.crewcard{background:#14302339;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px;margin-bottom:8px}
.crewcard.running{background:#15382a;border-color:rgba(140,198,63,.45)}
.runflag{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--lime);color:#08170e;padding:4px 10px;border-radius:999px;margin-bottom:10px;
}
.crewcard h2{color:#fff;font-size:1.3rem;margin:0 0 4px}

.tourlist{display:flex;flex-direction:column;gap:10px}
.tourrow{
  display:flex;align-items:center;gap:14px;background:#132a20;
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px;
}
.tourinfo{flex:1;min-width:0}
.tourinfo strong{display:block;color:#fff;font-size:1.05rem}
.tourinfo span{font-size:.85rem;color:rgba(255,255,255,.55)}
.tourblocked{font-size:.75rem;color:rgba(255,255,255,.4);text-align:right;line-height:1.3}

.stampbar{display:flex;gap:12px;align-items:center;background:#132a20;border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:14px 16px;margin-bottom:14px}
.stamp{flex:0 0 auto;padding-right:16px;border-right:1px solid rgba(255,255,255,.12)}
.stamp:nth-of-type(2){border-right:0}
.stamp span{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.stamp strong{font-size:1.35rem;color:#fff;font-variant-numeric:tabular-nums}
.stampform{margin-left:auto}

.kopf{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0 6px}
.kopf .field{margin:0}
.crew .kopf label{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px}
.crew .kopf input{padding:8px 10px;border-radius:8px}
.crew .kopf select{padding:8px 32px 8px 10px;border-radius:8px}
@media(max-width:620px){
  /* Tag oben, darunter Beginn und Ende nebeneinander, Witterung unten */
  .kopf{grid-template-columns:1fr 1fr;gap:8px}
  .kopf .field:nth-child(1){grid-column:1 / -1}
  .kopf .field:nth-child(2){grid-column:1}
  .kopf .field:nth-child(3){grid-column:2}
  .kopf .field:nth-child(4){grid-column:1 / -1}
}

/* Objektzeile: alles in einer Zeile, kompakt */
.objliste{display:flex;flex-direction:column;gap:6px;margin:12px 0 16px}
.objzeile{
  display:flex;align-items:center;gap:10px;
  background:#132a20;border:1.5px solid rgba(255,255,255,.1);border-radius:10px;
  padding:8px 10px;transition:border-color .2s,background .2s;
}
.objzeile.aktiv{border-color:var(--lime);background:#173627}
.objnr{
  flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;color:rgba(255,255,255,.7);
}
.objzeile.aktiv .objnr{background:var(--lime);color:#08170e}
.objtext{flex:1 1 auto;min-width:0}
.objtext strong{display:block;color:#fff;font-size:.92rem;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.objtext small{display:block;color:rgba(255,255,255,.45);font-size:.72rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.objhinweis{display:block;color:#f0c98a;font-size:.72rem;font-style:normal;margin-top:2px}
/* Großansicht eines Bildes über der Seite */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(4,10,7,.9);
  display:grid;place-items:center;padding:26px;cursor:zoom-out;
}
.lightbox img{
  max-width:100%;max-height:100%;border-radius:10px;display:block;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);background:#fff;
}
.lightbox .lbzu{
  position:absolute;top:16px;right:18px;font:inherit;font-size:.85rem;font-weight:700;
  padding:9px 16px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;
}
.lightbox .lbzu:hover{background:rgba(255,255,255,.3)}
.lightbox .lbtitel{
  position:absolute;bottom:18px;left:26px;right:26px;text-align:center;
  color:rgba(255,255,255,.8);font-size:.88rem;
}

/* Lageplan, Zufahrt, Gefahrstelle - direkt am Objekt sichtbar */
.objbilder{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.objbilder a{display:block;width:42px;height:34px;border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);background:#0d1a13}
.objbilder img{width:100%;height:100%;object-fit:cover;display:block}
.objbilder a:hover{border-color:var(--lime)}
.objwahl{flex:0 0 auto;display:flex;gap:5px}
.objwahl .tgl{position:relative;margin:0}
.objwahl .tgl input{position:absolute;opacity:0;width:0;height:0}
.objwahl .tgl span{
  display:block;padding:9px 11px;border-radius:8px;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.18);color:rgba(255,255,255,.65);
  font-weight:800;font-size:.72rem;letter-spacing:.02em;white-space:nowrap;
}
.objwahl .tgl input:checked + span{background:var(--lime);border-color:var(--lime);color:#08170e}
.objwahl .tgl.streu input:checked + span{background:#5fb3cc;border-color:#5fb3cc;color:#052029}
/* Kontrolle ist keine Leistung, sondern ein Nachweis - deshalb neutral */
.objwahl .tgl.kontrolle input:checked + span{background:#c9d3cd;border-color:#c9d3cd;color:#16241d}
.objzeile.fehlt{border-color:#8a6a2f;background:#1d2418}
.objzeile.fehlt .objnr{background:#e8a33a;color:#231502}
.objhilfe{font-size:.82rem;color:rgba(255,255,255,.55);margin:14px 0 0}
.objhilfe strong{color:#c9d3cd}
.crewhint.offen{color:#f0c98a;font-weight:700}
.objwahl .tgl input:focus-visible + span{outline:2px solid #fff;outline-offset:2px}
.objmap{
  flex:0 0 auto;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.6);text-decoration:none;
  border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:8px 8px;
}

/* Nachtragen */
.nachtragen{background:#132a20;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px}
.nachfelder{display:grid;grid-template-columns:1fr auto;gap:10px}
.nachtragen .field{margin:0}
.nachtragen .crewbtn{margin-top:12px}
.nachtragen .crewhint{margin-top:8px}
@media(max-width:520px){.nachfelder{grid-template-columns:1fr}}

.crewactions{display:flex;gap:10px;margin-top:20px}
.crewactions .crewbtn{margin-top:0}
.crewhint{font-size:.82rem;color:rgba(255,255,255,.45);text-align:center;margin-top:10px}

.lastlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lastlist a{
  display:flex;gap:14px;align-items:baseline;text-decoration:none;color:#e8efe9;
  background:#132a20;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px 15px;
}
.lastlist .ld{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.5);font-size:.85rem;flex:0 0 48px}
.lastlist .lt{flex:1;font-weight:700}
.lastlist .lm{font-size:.8rem;color:rgba(255,255,255,.5)}

@media(max-width:430px){
  .objzeile{flex-wrap:wrap}
  .objtext{flex:1 1 100%;order:1}
  .objnr{order:0}
  .objwahl{order:2;flex:1 1 auto}
  .objwahl .tgl{flex:1 1 0}
  .objwahl .tgl span{text-align:center}
  .objmap{order:3}
  .crewactions{flex-direction:column}
}

/* ---------------------------------------------------------------
   Produktbewertungen: Sterne, Liste, Formular
   --------------------------------------------------------------- */

/* Sternereihe. Der gefuellte Teil liegt deckungsgleich ueber dem grauen,
   dadurch lassen sich auch Zwischenwerte wie 4,3 sauber darstellen. */
.stars{position:relative;display:inline-block;line-height:0;white-space:nowrap;vertical-align:middle;font-size:.95rem}
.stars svg{width:1em;height:1em;fill:currentColor;display:inline-block}
.starsbg{display:block;color:#d8d2c2}
.rw .starsbg{color:#ccd4cd}
.starsfill{position:absolute;top:0;left:0;display:block;overflow:hidden;color:var(--ochre)}
.starstext{margin-left:7px;font-size:.82rem;color:var(--muted);vertical-align:middle}
.starstext strong{color:var(--ink);font-weight:800}

/* Produktkachel ist jetzt ein Link auf die Produktseite */
.product{text-decoration:none;color:inherit}
.pstars{display:flex;flex-wrap:wrap;align-items:center;gap:1px 5px;margin:4px 0 0;line-height:1.2}
.pstars .stars{font-size:.82rem}
.pstars .starstext{font-size:.74rem;margin-left:0}

/* ---- Produktseite ---- */
.backlink{margin:0 0 10px;font-size:.85rem;font-weight:700}
.backlink a{color:var(--green-3);text-decoration:none}
.backlink a:hover{text-decoration:underline}
.detailgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:30px;align-items:start}
.detailmedia{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-l);padding:16px;
}
.detailmedia img{width:100%;max-height:430px;object-fit:contain;margin-inline:auto}
.detailstars{margin:0 0 10px}
.detailstars a{text-decoration:none}
.detailstars .stars{font-size:1.1rem}
.detailprice{margin:0 0 8px;font-size:1.7rem;font-weight:800;color:var(--green);letter-spacing:-.02em}

/* ---- Zusammenfassung mit Sterneverteilung ---- */
.reviewcols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);gap:28px;align-items:start}
.reviewsum{
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-bottom:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;
}
.reviewavg{text-align:center;min-width:104px}
.reviewavg strong{display:block;font-size:2.1rem;line-height:1;font-weight:800;letter-spacing:-.03em}
.reviewavg .stars{font-size:1rem;margin:6px 0 4px}
.reviewavg .small{display:block}
.reviewspread{flex:1 1 210px;min-width:0}
.spreadrow{display:flex;align-items:center;gap:9px;font-size:.79rem;color:var(--muted)}
.spreadnum{flex:0 0 auto;width:32px;white-space:nowrap}
.spreadbar{flex:1;height:7px;border-radius:4px;background:#ece7da;overflow:hidden}
.spreadbar span{display:block;height:100%;border-radius:4px;background:var(--ochre)}
.spreadanz{flex:0 0 auto;width:20px;text-align:right;font-variant-numeric:tabular-nums}

/* ---- Liste der Bewertungen ---- */
.reviewlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 17px}
.reviewhead{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:5px}
.reviewhead .stars{font-size:.88rem}
.reviewhead strong{font-size:.93rem}
.reviewhead time{margin-left:auto;font-size:.77rem;color:var(--muted)}
.review p{margin:0;font-size:.93rem;color:var(--muted)}

/* ---- Formular mit anklickbaren Sternen, ohne JavaScript ---- */
.formtitel{font-size:1.08rem;margin:0 0 12px}
.reviewform{position:sticky;top:calc(var(--kopf,60px) + 16px)}
.starfield{border:0;padding:0;margin:0 0 14px;min-width:0}
.starfield legend{padding:0;font-weight:700;font-size:.93rem;margin-bottom:6px}
/* row-reverse: im Quelltext steht 5 zuerst, angezeigt wird 1 bis 5 von links */
.starpick{position:relative;display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:3px}
.starpick input{position:absolute;width:1px;height:1px;opacity:0}
.starpick label{
  cursor:pointer;line-height:0;padding:2px;border-radius:5px;color:#d8d2c2;
  transition:color .15s var(--ease),transform .15s var(--ease);
}
.starpick label svg{width:32px;height:32px;fill:currentColor}
.starpick input:checked + label,
.starpick input:checked ~ input + label{color:var(--ochre)}
/* Beim Ueberfahren zaehlt die Maus, nicht die vorher gewaehlte Zahl */
.starpick:hover label,
.starpick:hover input:checked + label,
.starpick:hover input:checked ~ input + label{color:#d8d2c2}
.starpick:hover label:hover,
.starpick:hover label:hover ~ label,
.starpick:hover input:checked + label:hover,
.starpick:hover input:checked ~ input + label:hover{color:var(--ochre)}
.starpick label:hover{transform:scale(1.08)}
.starpick input:focus-visible + label{outline:3px solid var(--green-3);outline-offset:2px}

/* ---- Adminliste ---- */
.admstars .stars{font-size:.95rem}
.reviewtext{max-width:360px;white-space:normal;color:var(--muted);font-size:.89rem}

@media(max-width:1000px){
  .reviewcols{grid-template-columns:1fr}
  .reviewform{position:static}
}
@media(max-width:860px){
  .detailgrid{grid-template-columns:1fr;gap:20px}
  .detailmedia img{max-height:320px}
  .starpick label svg{width:36px;height:36px}
  .reviewhead time{margin-left:0;width:100%}
}

/* ---------------------------------------------------------------
   Warenautomat: Standortkarte, Sortiment, Verfuegbarkeit
   --------------------------------------------------------------- */

/* Die Karte ist ein Bild auf unserem Server. Die Marker setzt PHP als
   Prozentwerte darueber, dadurch sitzen sie in jeder Breite richtig und
   es wird nichts von fremden Servern nachgeladen. */
.karte{margin:0}
.kartebild{
  position:relative;overflow:hidden;line-height:0;
  border:1px solid var(--line);border-radius:var(--radius-l);background:#e8e4d8;
}
.kartebild img{display:block;width:100%;height:auto}
.marker{
  position:absolute;transform:translate(-50%,-100%);
  padding-bottom:10px;text-decoration:none;color:inherit;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.35));
}
.markernr{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;border:2px solid #fff;
  background:var(--green);color:#fff;font-size:.85rem;font-weight:800;line-height:1;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.markernr::after{
  content:"";position:absolute;top:100%;left:50%;margin-top:-2px;
  transform:translateX(-50%);border:6px solid transparent;border-top-color:#fff;
}
.marker:hover .markernr,
.marker:focus-visible .markernr{background:var(--ochre);transform:scale(1.12)}
.markername{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:4px;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.96);border:1px solid var(--line);color:var(--green);
  font-size:.75rem;font-weight:700;line-height:1.3;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
}
.marker:hover .markername,
.marker:focus-visible .markername{opacity:1}
.karte figcaption{margin-top:9px}

/* Sortiment in der Standortkarte */
.mnr{
  display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:50%;margin-right:5px;
  background:var(--green);color:#fff;font-size:.76rem;font-weight:800;
}
.sortiment{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.sortikopf{margin:0 0 8px;font-size:.9rem}
.sortiliste{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:5px}
.sortiliste li{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;line-height:1.35}
.sortiliste li > span{flex:0 0 auto;white-space:nowrap}
.sortiliste a{text-decoration:none;color:var(--green)}
.sortiliste a:hover{text-decoration:underline}

/* Standorte auf der Produktseite */
.wolist{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px}
.wolist svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--green-3)}
.wolist strong{display:block;font-size:.9rem;margin-bottom:4px}
.wolist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.wolist li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:.9rem}
.wolist a{color:var(--green);font-weight:650}
.wo-da{font-size:.81rem;font-weight:700;color:#2f7a4f}
.wo-weg{font-size:.81rem;color:var(--muted)}

/* Adminbereich: Belegung je Automat */
.automattable{min-width:820px}
.automattable td{vertical-align:middle}
.automattable td.c-chk{vertical-align:middle;padding-top:10px;text-align:center}
.automattable .check{width:22px;height:22px}
.automattable input[type=number]{width:90px;text-align:right}
.automattable .zeile-an{background:#f4f8f4}
.wo{display:inline-block;margin-right:9px;white-space:nowrap}

@media(max-width:620px){
  .markernr{width:24px;height:24px;font-size:.76rem}
  .markername{font-size:.7rem}
}

/* ---------------------------------------------------------------
   Responsiv
   --------------------------------------------------------------- */
@media(max-width:1000px){
  .tools{grid-template-columns:1fr}
  .featurebar .wrap{grid-template-columns:repeat(2,1fr)}
  .feature:nth-child(3){border-left:0}
  .feature:nth-child(n+3){border-top:1px solid var(--line)}
  .rw .feature:nth-child(n+3){border-top-color:rgba(255,255,255,.09)}
  .cols2{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .nav{height:58px}
  .logo{height:38px;max-width:170px}
  .menu{display:block}
  .nav nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:4px;padding:14px 20px 22px;
    border-top:1px solid var(--line);
  }
  .wg .nav nav{background:rgba(255,253,247,.98)}
  .rw .nav nav{background:rgba(6,18,13,.98);border-top-color:rgba(255,255,255,.1)}
  .nav nav.open{display:flex;box-shadow:0 24px 40px -24px rgba(0,0,0,.6)}
  .nav nav a{padding:13px 14px;font-size:1.02rem}
  .nav nav a.navcta{margin:8px 0 0;justify-content:center;text-align:center}
  .intro{grid-template-columns:1fr;gap:18px;align-items:start}
  .grid{grid-template-columns:1fr;gap:20px}
  .productgrid{grid-template-columns:repeat(2,1fr);gap:13px}
  .product .media{padding:10px}
  .pinfo{padding:11px 12px 13px}
  .product h3{font-size:.94rem}
  .master{grid-template-columns:1fr;min-height:auto}
  .brandpane{min-height:62vh}
  .foot{grid-template-columns:1fr;gap:26px}
  .featurebar .wrap{grid-template-columns:1fr}
  .feature{border-left:0;border-top:1px solid var(--line);padding:20px}
  .feature:first-child{border-top:0}
  .rw .feature{border-top-color:rgba(255,255,255,.09)}
  .loginform{margin-top:4vh}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .card:hover,.card:hover>img,.brandpane:hover>div{transform:none}
}

/* ---------------------------------------------------------------
   Adminbereich auf dem Handy

   Ab hier stapelt die Kopfleiste zu einem hohen Block. Bliebe sie
   zusaetzlich oben kleben, waere ein Viertel des Bildschirms dauerhaft
   belegt - deshalb scrollt sie hier mit.
   --------------------------------------------------------------- */
@media(max-width:700px){
  .adminbar .wrap{min-height:0;padding:9px 0;gap:2px;flex-wrap:wrap}
  .adminbar strong{margin:0;font-size:.72rem}

  /* Die gesamte Navigation liegt hinter einem Knopf - zugeklappt bleibt
     von der Leiste nur eine Zeile stehen. */
  .admtoggle{
    display:inline-flex;align-items:center;margin-left:auto;cursor:pointer;
    background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:8px;
    padding:9px 15px;font:inherit;font-weight:700;font-size:.95rem;
  }
  .admtoggle[aria-expanded="true"]{background:var(--lime);color:#08170e}
  .admnav{display:none;width:100%;flex:none;flex-direction:column;align-items:stretch;margin-top:8px}
  .admnav.offen{display:flex}
  .adminbar a,.dd > summary{padding:11px 13px;font-size:.95rem}
  .adminbar .barspacer{display:none}

  /* Unter 16px zoomt iOS beim Antippen in das Feld hinein und
     der Rest der Seite rutscht aus dem Bild. */
  .adminbody input,.adminbody select,.adminbody textarea,
  .adminbody .edittable input,.adminbody .edittable textarea{font-size:16px}

  /* Breite Tabellen scrollen seitlich in ihrem Kasten */
  .adminbody .tablewrap{-webkit-overflow-scrolling:touch}

  /* Speicherleiste: Hinweis ueber den Knopf, Knopf ueber die ganze Breite */
  .savebar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}
  .savebar .btn{width:100%}
  .savehint{text-align:center}

  /* Werkzeugkaesten und deren Formulare ebenfalls einspaltig */
  .toolform{flex-direction:column;align-items:stretch}
  .toolform .btn,.toolform input{width:100%}

  .adminmain{padding:22px 0 48px}
  .pagebar{margin-bottom:16px}
}

/* ---------------------------------------------------------------
   Erweitertes Kontaktformular und Admin-Popup
   --------------------------------------------------------------- */
.formhinweis{margin-bottom:16px}
.pflicht{color:#b3261e;font-weight:800}
.rw .pflicht{color:#e2725b}

/* Zwei Felder nebeneinander, auf schmalen Bildschirmen untereinander */
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:0 13px}
.feldpaar.plzstadt{grid-template-columns:minmax(0,140px) 1fr}

.dateifeld input[type=file]{
  padding:9px 11px;background:#fafbfa;border:1.5px dashed var(--line);
  border-radius:var(--radius-s);cursor:pointer;
}
.dateifeld input[type=file]:hover{border-color:var(--green-3)}

/* Einwilligung: Kaestchen und Text nebeneinander, Text umbricht sauber */
.zustimmung label{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;cursor:pointer}
.zustimmung .check{margin-top:3px}
.zustimmung span{font-size:.92rem;line-height:1.5;color:var(--muted)}
.zustimmung a{color:inherit}

@media(max-width:620px){
  .feldpaar,.feldpaar.plzstadt{grid-template-columns:1fr}
}

/* Popup im Adminbereich */
.admdialog{
  width:min(560px,calc(100% - 28px));padding:0;border:0;border-radius:var(--radius);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);background:#fff;color:var(--ink);
}
.admdialog::backdrop{background:rgba(8,23,14,.55)}
.admdialog .form{max-width:none;padding:22px 24px 24px}
.dialogkopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dialogkopf h2{margin:0;padding:0;border:0;font-size:1.15rem}
.dialogzu{
  background:none;border:0;font-size:1.7rem;line-height:1;cursor:pointer;
  color:var(--muted);padding:0 4px;
}
.dialogzu:hover{color:var(--ink)}
.dialogfuss{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
@media(max-width:520px){
  .dialogfuss{flex-direction:column-reverse}
  .dialogfuss .btn{width:100%}
}

/* Auffaelliger Hinweis auf oeffentlichen Seiten */
.hinweisbox{
  display:flex;align-items:flex-start;gap:13px;
  margin:18px 0 0;padding:15px 18px;
  background:#fdf3e0;border:1.5px solid var(--ochre);border-left-width:5px;
  border-radius:var(--radius-s);box-shadow:var(--shadow-s);
  color:#7a5312;font-weight:650;font-size:1rem;line-height:1.45;
}
.hinweisbox svg{flex:none;width:24px;height:24px;stroke:var(--ochre);margin-top:1px}
.rw .hinweisbox{background:#2a2415;border-color:var(--ochre);color:#f0d9a8}
@media(max-width:620px){
  .hinweisbox{padding:13px 14px;gap:10px;font-size:.95rem}
  .hinweisbox svg{width:21px;height:21px}
}

/* ---------------------------------------------------------------
   Winterdienst: kompakte Berichtsansicht und Abrechnung
   --------------------------------------------------------------- */
/* Kopfdaten eines Berichts: vier schmale Felder in einer Reihe */
.kopfraster{display:grid;grid-template-columns:repeat(4,1fr);gap:0 13px}
.kopfraster .breit2{grid-column:span 2}
@media(max-width:900px){ .kopfraster{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
  .kopfraster{grid-template-columns:1fr}
  .kopfraster .breit2{grid-column:auto}
}

/* Kennzahlen als eine Zeile statt vier Kacheln */
.kennzahlen{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
  margin:0 0 18px;padding:12px 16px;
  background:#fff;border:1px solid #e2e6e2;border-radius:var(--radius);
  font-size:.94rem;color:var(--muted);
}
.kennzahlen strong{color:var(--ink);font-size:1.05rem}
.kennzahlen .gemessen{margin-left:auto;font-size:.86rem;font-style:italic}
@media(max-width:620px){ .kennzahlen .gemessen{margin-left:0;width:100%} }

/* Im Bericht sind die Abschnitte dichter als sonst im Admin */
.adminmain .section{padding-top:22px}
.adminmain .section h2{margin-bottom:10px}

/* Abrechnung: erledigte Kunden treten zurueck */
.abrechnungstabelle .c-num{width:88px}
.abrechnungstabelle .c-act{width:70px}
.pagebarknoepfe{display:flex;gap:10px;flex-wrap:wrap}
.abrechnungstabelle tr.istabgerechnet{background:#f2f7f3}
.abrechnungstabelle tr.istabgerechnet td:first-child strong{color:var(--green-3)}
.abrechnungstabelle tr.istabgerechnet td:first-child strong::after{
  content:" ¹3";font-weight:900;
}

/* ---------------------------------------------------------------
   Tabellenfilter im Stil einer Tabellenkalkulation
   --------------------------------------------------------------- */
.tfleiste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.tfleiste .tfsuche{
  width:auto;flex:1 1 260px;max-width:380px;padding:9px 13px;font-size:.94rem;
  border:1.5px solid #dfe4df;border-radius:var(--radius-s);background:#fff;
}
.tfleiste .tfzahl{font-size:.9rem;color:var(--muted);font-weight:600}
.tfleiste.gefiltert .tfzahl{color:var(--green-3)}
.tfleiste .tfreset{margin-left:auto}

.tfspalte{position:relative;white-space:nowrap}
.tfknopf{
  margin-left:6px;padding:1px 6px;border:0;border-radius:5px;cursor:pointer;
  background:rgba(0,0,0,.07);color:var(--muted);font-size:.78rem;line-height:1.5;
}
.tfknopf:hover{background:rgba(0,0,0,.14);color:var(--ink)}
.tfknopf.aktiv{background:var(--green-3);color:#fff}
.tfspalte.sortauf::after{content:" ▲";font-size:.7rem;color:var(--green-3)}
.tfspalte.sortab::after{content:" ▼";font-size:.7rem;color:var(--green-3)}

.tfpanel{
  display:none;position:absolute;top:100%;left:0;z-index:40;width:270px;
  margin-top:4px;padding:10px;background:#fff;color:var(--ink);
  border:1px solid #d8ded8;border-radius:var(--radius-s);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.35);
  font-weight:400;text-transform:none;letter-spacing:0;
}
.tfpanel.auf{display:block}
.tfsort{display:flex;gap:6px;margin-bottom:8px}
.tfsort button{
  flex:1;padding:6px 8px;border:1px solid #dfe4df;border-radius:6px;
  background:#fafbfa;cursor:pointer;font:inherit;font-size:.85rem;
}
.tfsort button:hover{border-color:var(--green-3);color:var(--green-3)}
.tfpanel .tffeld{
  width:100%;padding:7px 10px;font-size:.88rem;margin-bottom:8px;
  border:1.5px solid #dfe4df;border-radius:6px;
}
.tfalle{display:block;padding:4px 2px 8px;border-bottom:1px solid var(--line);
  margin-bottom:6px;font-size:.88rem;font-weight:700;cursor:pointer}
.tfliste{max-height:230px;overflow-y:auto}
.tfliste label{
  display:flex;align-items:center;gap:8px;padding:4px 2px;
  font-size:.88rem;cursor:pointer;white-space:normal;
}
.tfliste label:hover{background:#f3f7f4}
.tfliste input,.tfalle input{width:auto;margin:0;accent-color:var(--green)}

@media(max-width:620px){
  .tfleiste .tfreset{margin-left:0}
  .tfpanel{width:min(270px,calc(100vw - 48px))}
}

@media print{
  .header,.footer,.cta,.menu,.tabs,.adminbar{display:none!important}
  body{background:#fff;font-size:12pt}
  .card{box-shadow:none;border:1px solid #ccc}
}