/* GEPRUEFT-GEGEN: geprueft: verzeichnis-vorlagen/stil.css (der gemeinsame Grundstil aus
   den Entwuerfen, wird hier NICHT wiederholt, sondern ergaenzt), entwuerfe/seite_*.html
   (dort standen diese Regeln je Seite doppelt inline). Diese Datei haelt genau das, was
   im Live-Betrieb dazukommt: Hello Elementor bringt fast kein CSS mit. */

body { background: var(--nacht); color: var(--weiss); margin: 0;
       font: 15.5px/1.62 Inter, system-ui, -apple-system, sans-serif; }
h1, h2, h3, h4 { margin: 0; }
.kbild.hat-bild { background-size: cover; background-position: center; }

/* Platzhalter-Variante A: Wortmarke auf Weiss (Sven 30.08.2026) */
.wortmarke { background:#fff; display:flex; align-items:center; justify-content:center;
             padding:16px; text-align:center; }
.wortmarke b { font-weight:700; font-size:19px; letter-spacing:-.03em; color:#111318;
               line-height:1.15; display:-webkit-box; -webkit-line-clamp:3;
               -webkit-box-orient:vertical; overflow:hidden; }
.wortmarke i { display:block; font-style:normal; font-size:10.5px; letter-spacing:.16em;
               text-transform:uppercase; color:#8b919c; margin-top:7px; }
.tbild.wortmarke b { font-size:15px; }
.tbild.wortmarke i { font-size:9.5px; }
.empfbild.wortmarke b { font-size:26px; }

/* Ergebniszeile der Uebersicht */
.treffer{display:grid;grid-template-columns:132px 1fr auto;gap:20px;background:var(--karte);
  border:1px solid var(--rand);border-radius:14px;padding:16px;text-decoration:none;
  margin-bottom:14px;transition:.15s;color:inherit}
.treffer:hover{border-color:#39404b}
.tbild{height:112px;border-radius:9px;overflow:hidden;background:linear-gradient(150deg,#262a31,#171a1f);
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:600;color:#3d434e}
.tbild.hat-bild{background-size:cover;background-position:center}
.tmitte h3{font-size:18px;font-weight:600;letter-spacing:-.015em}
.tmeta{display:flex;gap:7px;align-items:center;margin-top:7px;font-size:13.5px;
  color:var(--matt);flex-wrap:wrap}
.tbesch{margin-top:9px;font-size:13.5px;color:var(--dunkelmatt);max-width:64ch}
.ttags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.tag{border:1px solid var(--rand2);border-radius:6px;padding:3px 8px;font-size:11.5px;color:var(--dunkelmatt)}
.trechts{display:flex;flex-direction:column;gap:8px;align-items:flex-end;justify-content:center;min-width:150px}
.tel{font-size:14.5px;color:var(--matt)}

/* Betriebsseite */
.galerie{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;height:330px;margin-top:6px}
.galerie div{background:linear-gradient(150deg,#262a31,#171a1f);border-radius:12px;
  background-size:cover;background-position:center;display:flex;align-items:center;
  justify-content:center;color:#3d434e;font-size:13px}
.galerie div:first-child{grid-row:span 2;font-size:52px;font-weight:600}
.titelzeile{display:flex;align-items:flex-start;gap:20px;margin-top:26px;flex-wrap:wrap}
.titelzeile h1{font-size:clamp(28px,3.6vw,38px);letter-spacing:-.03em}
.titelmeta{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:15px;
  color:var(--matt);flex-wrap:wrap}
.titelaktion{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.zwei{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;margin-top:32px}
.block{background:var(--karte);border:1px solid var(--rand);border-radius:14px;
  padding:26px 28px;margin-bottom:18px}
.block h2{font-size:19px;letter-spacing:-.02em;margin-bottom:14px}
.block p{color:var(--matt);font-size:15px}
.leistungen{display:flex;gap:8px;flex-wrap:wrap}
.leistungen span{border:1px solid var(--rand2);border-radius:7px;padding:6px 12px;
  font-size:13.5px;color:var(--matt)}
.zeiten{width:100%;border-collapse:collapse;font-size:14.5px}
.zeiten td{padding:9px 0;border-bottom:1px solid var(--rand);color:var(--matt)}
.zeiten tr:last-child td{border-bottom:0}
.zeiten td:last-child{text-align:right;color:var(--weiss)}
.zeiten tr.heute td{color:var(--gold)}
.note{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1}
.bwkopf{display:flex;align-items:center;gap:22px;padding-bottom:18px;
  border-bottom:1px solid var(--rand);margin-bottom:8px;flex-wrap:wrap}
.balken{flex:1;min-width:180px}
.bz{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dunkelmatt);margin:3px 0}
.bl{flex:1;height:6px;border-radius:3px;background:var(--rand)}
.bl i{display:block;height:100%;border-radius:3px;background:var(--gold)}
.bewertung{padding:16px 0;border-bottom:1px solid var(--rand)}
.bewertung:last-child{border-bottom:0}
.bwzeile{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--dunkelmatt)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--rand2);display:flex;
  align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:var(--matt)}
.bewertung p{margin-top:9px;font-size:14.5px;color:var(--matt)}
.kontakt div{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--rand);font-size:14.5px}
.kontakt div:last-child{border-bottom:0}
.kontakt b{color:var(--dunkelmatt);font-weight:500;min-width:96px;font-size:13.5px}

/* Karte: OpenStreetMap, helle Originalvariante (Sven 30.08.2026) */
.karte-bild{height:180px;border-radius:11px;overflow:hidden;border:1px solid var(--rand);
  margin-bottom:14px;position:relative;background:#e9e5dc}
.karte-bild .raster{position:absolute;left:50%;top:50%;width:768px;height:768px;
  margin:-384px 0 0 -384px;display:grid;grid-template-columns:repeat(3,256px);
  grid-template-rows:repeat(3,256px)}
.karte-bild .raster img{display:block}
.karte-bild .nadel{position:absolute;left:50%;top:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;border-radius:50%;background:var(--gold);border:3px solid #0e0f12;
  box-shadow:0 0 0 4px rgba(216,168,60,.28);z-index:3}
.karte-bild .att{position:absolute;right:6px;bottom:5px;font-size:10px;color:#4a4a4a;
  background:rgba(255,255,255,.8);padding:2px 6px;border-radius:4px;z-index:3}
.karte-bild .att a{color:inherit}
.seitenbox{position:sticky;top:96px;display:flex;flex-direction:column;gap:0}
.beanspruchen{background:linear-gradient(125deg,var(--karte),rgba(216,168,60,.08));
  border:1px solid rgba(216,168,60,.3);border-radius:14px;padding:22px 24px}
.beanspruchen h4{font-size:15.5px;margin-bottom:7px}
.beanspruchen p{font-size:13.5px;color:var(--matt);margin-bottom:15px}

/* Startseite */
.hero{padding:70px 0 54px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-170px;top:-130px;width:540px;height:540px;
  border-radius:50%;background:radial-gradient(circle,rgba(216,168,60,.13),transparent 68%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(36px,5vw,54px);line-height:1.08;letter-spacing:-.035em;
  max-width:17ch;margin-top:22px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{margin-top:18px;color:var(--matt);font-size:17.5px;max-width:54ch}
.empf{display:grid;grid-template-columns:1.12fr 1fr;background:var(--karte);
  border:1px solid var(--rand2);border-radius:16px;overflow:hidden}
.empfbild{min-height:330px;background:linear-gradient(150deg,#262a31,#171a1f);
  background-size:cover;background-position:center;display:flex;align-items:center;
  justify-content:center;font-size:64px;font-weight:600;color:#3d434e}
.empftext{padding:38px 40px}
.empftext h3{font-size:29px;letter-spacing:-.03em;margin-top:16px;line-height:1.15}
.empfmeta{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:14.5px;
  color:var(--matt);flex-wrap:wrap}
.empftext p{margin-top:16px;color:var(--matt);font-size:15px}
.empfaktion{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.empfrest{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.branchen{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.br{background:var(--karte);border:1px solid var(--rand);border-radius:12px;
  padding:18px 16px;text-decoration:none;color:inherit;transition:.15s}
.br:hover{border-color:var(--gold);color:var(--gold)}
.br b{display:block;font-size:15px;font-weight:600}
.br span{font-size:12.5px;color:var(--dunkelmatt)}
.staedteliste{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.staedteliste a{background:var(--karte);border:1px solid var(--rand);border-radius:10px;
  padding:13px 15px;text-decoration:none;color:inherit;font-size:14.5px}
.staedteliste a:hover{border-color:var(--gold);color:var(--gold)}
.staedteliste span{display:block;font-size:12px;color:var(--dunkelmatt)}

/* Uebersicht */
.leiste{position:sticky;top:72px;z-index:15;background:rgba(14,15,18,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rand);padding:14px 0}
.leiste .wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.leiste .rechts{margin-left:auto;font-size:13.5px;color:var(--dunkelmatt)}
.kopf{padding:28px 0 30px;border-bottom:1px solid var(--rand)}
.kopf h1{font-size:clamp(28px,3.6vw,38px);letter-spacing:-.03em;margin-top:8px}
.kopf .unter{color:var(--matt);margin-top:9px;max-width:62ch;font-size:15.5px}
.blaettern{display:flex;gap:7px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.blaettern a,.blaettern span{border:1px solid var(--rand2);border-radius:8px;
  padding:8px 14px;font-size:14px;color:var(--matt);text-decoration:none}
.blaettern .an{background:var(--gold);border-color:var(--gold);color:#1c1503;font-weight:600}

@media(max-width:1000px){
  .zwei{grid-template-columns:1fr}.seitenbox{position:static}
  .staedteliste{grid-template-columns:repeat(3,1fr)}
  .empf{grid-template-columns:1fr}.empfrest{grid-template-columns:1fr 1fr}
  .branchen{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .treffer{grid-template-columns:1fr}.tbild{height:150px}.trechts{align-items:stretch}
  .galerie{grid-template-columns:1fr;height:auto}
  .galerie div{height:150px}.galerie div:first-child{height:220px}
  .staedteliste,.branchen,.empfrest{grid-template-columns:1fr 1fr}
  .empftext{padding:26px 22px}
}

/* Filter- und Stadtzeilen der Seitenspalte. Ohne feste Regel klebte die Zahl am
   Ortsnamen ("Wolfsburg9", live gesehen 31.08.2026). */
.box{background:var(--karte);border:1px solid var(--rand);border-radius:14px;padding:20px 22px}
.box h4{font-size:15px;font-weight:600;margin-bottom:13px}
.box.werb{background:linear-gradient(125deg,var(--karte),rgba(216,168,60,.08));
  border-color:rgba(216,168,60,.3)}
.box.werb p{font-size:13.5px;color:var(--matt);margin:8px 0 15px}
.filterzeile{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:14px;
  color:var(--matt);text-decoration:none}
.filterzeile:hover{color:var(--gold)}
.filterzeile .ort{flex:1}
.filterzeile .n{font-size:12.5px;color:var(--dunkelmatt)}
.inhalt{display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start}
.spalte{position:sticky;top:150px;display:flex;flex-direction:column;gap:16px}
@media(max-width:1000px){.inhalt{grid-template-columns:1fr}.spalte{position:static}}

/* Die Knopfreihe rutschte unter den Titel, sobald der Titel lang war
   (live gesehen 31.08.2026). Ursache: flex-wrap auf der Titelzeile bei
   margin-left:auto. Der Titelblock bekommt jetzt eine Mindestbreite und
   die Knoepfe duerfen erst auf dem Handy umbrechen. */
.titelzeile > div:first-child{flex:1 1 380px;min-width:0}
.titelaktion{flex:0 0 auto;align-self:flex-start}
@media(max-width:900px){
  .titelzeile{flex-direction:column}
  .titelaktion{margin-left:0;width:100%}
}