/* =====================================================================
   Interstapler — gemeinsames Stylesheet der Unterseiten
   (Mietseite und Ortsseiten)

   WARUM EINE EIGENE DATEI
   Die Startseite traegt ihr CSS im Dokument. Das ist dort richtig: sie
   ist die erste Seite, die ein Besucher sieht, und ein zweiter Abruf
   kostet Zeit. Bei sieben Unterseiten dreht sich das Verhaeltnis — die
   Datei wird einmal geladen und gilt dann fuer alle weiteren Klicks.
   Die Startseite bleibt deshalb unangetastet.

   Die Farben und Schriften sind identisch zur Startseite. Aendert sich
   dort etwas, muss es hier mitgeaendert werden.
   ===================================================================== */

/* Schriften aus dem eigenen Ordner statt von Google. Dynamisch
   eingebundene Google Fonts uebertragen die IP des Besuchers an Google
   (LG Muenchen I, 2022). Fehlen die Dateien, greift die Ersatzkette —
   die Seite bleibt lesbar, sie sieht nur anders aus. */
@font-face{font-family:"Archivo";src:url("fonts/archivo-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --grund:#FAF9F7;
  --flaeche:#FFFFFF;
  --tinte:#231F20;
  --tinte-2:#5D5754;
  --tinte-3:#8A8481;
  --linie:#E6E2DE;
  --linie-2:#F0EDEA;
  --gold:#F9A620;
  --gold-tief:#B87A0E;
  --gold-blass:#FDF4E4;
  --gruen:#2C6E49;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;
}
h1,h2,h3{font-family:"Archivo","Archivo Narrow","Helvetica Neue",Arial,sans-serif;margin:0;text-wrap:balance}
.breite{max-width:1180px;margin:0 auto;padding:0 22px}
.schmal{max-width:820px;margin:0 auto;padding:0 22px}

/* --- Gewerbehinweis --- */
.gewerbeband{background:var(--tinte);color:#fff;font-size:12.5px;letter-spacing:.02em;
  text-align:center;padding:7px 16px}
.gewerbeband b{font-weight:600}

/* --- Kopf --- */
header{background:var(--flaeche);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:40}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.kopf img{height:34px;width:auto;display:block}
.kontakt{display:flex;align-items:center;gap:18px;font-size:14px}
.kontakt a{color:var(--tinte);text-decoration:none;font-weight:500}
.kontakt a:hover{color:var(--gold-tief)}
.tel{background:var(--tinte);color:#fff!important;padding:8px 16px;border-radius:4px}
.tel:hover{background:var(--gold-tief)}
@media (max-width:620px){ .kontakt .mail{display:none} }

/* --- Brotkrumen: zeigt Google und dem Besucher, wo er steckt --- */
.krume{font-size:13px;color:var(--tinte-3);padding:12px 0 0}
.krume a{color:var(--tinte-2);text-decoration:none}
.krume a:hover{color:var(--gold-tief)}
.krume span{margin:0 7px;color:var(--linie)}

/* --- Aufmacher --- */
.auf{padding:34px 0 30px;border-bottom:1px solid var(--linie)}
.auf h1{font-size:clamp(28px,4.2vw,42px);font-weight:700;line-height:1.1;letter-spacing:-.01em;max-width:22ch}
.auf p.vor{color:var(--tinte-2);font-size:17.5px;margin:15px 0 0;max-width:60ch}
.marken{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.marke-punkt{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tinte-2)}
.marke-punkt svg{width:16px;height:16px;stroke:var(--gold-tief);fill:none;stroke-width:2.4}

/* --- Textabschnitte --- */
.abschnitt{padding:38px 0;border-bottom:1px solid var(--linie)}
.abschnitt:last-of-type{border-bottom:none}
.abschnitt h2{font-size:clamp(21px,2.6vw,27px);font-weight:600;margin-bottom:14px}
.abschnitt h3{font-size:17px;font-weight:600;margin:24px 0 7px}
.abschnitt p{color:var(--tinte-2);margin:0 0 13px;max-width:72ch}
.abschnitt ul{color:var(--tinte-2);margin:0 0 13px;padding-left:20px;max-width:72ch}
.abschnitt li{margin-bottom:6px}
.abschnitt a{color:var(--gold-tief)}

/* --- Preistabelle ---
   Auf dem Handy wird die Tabelle zu Karten umgebaut: eine vierspaltige
   Tabelle auf 360 Pixel ist unlesbar. Die Spaltennamen stehen dann als
   data-l am Feld. */
.preisblock{margin:22px 0 10px}
.preisblock h3{font-size:16px;font-weight:600;margin:26px 0 8px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tinte-3)}
table.preise{width:100%;border-collapse:collapse;font-size:15px;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:4px;overflow:hidden}
table.preise th,table.preise td{padding:10px 13px;text-align:right;border-bottom:1px solid var(--linie-2)}
table.preise th{background:var(--grund);font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--tinte-2)}
table.preise th:first-child,table.preise td:first-child{text-align:left}
table.preise td.monat{font-weight:600}
table.preise tr:last-child td{border-bottom:none}
.preishinweis{font-size:13.5px;color:var(--tinte-3);line-height:1.55;margin:12px 0 0;max-width:72ch}
.preisladen{padding:26px 0;color:var(--tinte-3);font-size:15px}
@media (max-width:620px){
  table.preise{border:none;background:none}
  table.preise thead{display:none}
  table.preise tr{display:block;background:var(--flaeche);border:1px solid var(--linie);
    border-radius:4px;margin-bottom:9px;padding:4px 0}
  table.preise td{display:flex;justify-content:space-between;border:none;padding:6px 13px;text-align:right}
  table.preise td:first-child{font-weight:600;border-bottom:1px solid var(--linie-2);
    padding-bottom:8px;margin-bottom:3px}
  table.preise td[data-l]::before{content:attr(data-l);color:var(--tinte-3);font-size:13px;
    font-weight:400;text-align:left}
}

/* --- Bedingungskasten --- */
.bedingung{background:var(--gold-blass);border:1px solid #F2E2C2;border-radius:4px;
  padding:18px 20px;margin:22px 0 0}
.bedingung h3{font-size:15.5px;font-weight:600;margin:0 0 7px}
.bedingung p{font-size:14.5px;color:#6B5420;margin:0;max-width:none}

/* --- Zahlenstreifen --- */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);border-radius:4px;margin:20px 0 0;overflow:hidden}
.fakt{background:var(--flaeche);padding:16px 18px}
.fakt b{display:block;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:21px;font-weight:700}
.fakt span{display:block;font-size:13px;color:var(--tinte-3);margin-top:2px}

/* --- Bestandsauszug --- */
.auszug{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px;margin:18px 0 0}
/* Die Regel .abschnitt a faerbt Verweise gold. Eine Geraetekachel ist
   aber kein Textlink — deshalb hier gleiche Spezifitaet und zurueck auf
   die normale Textfarbe. */
.akarte,.abschnitt a.akarte{display:block;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:4px;text-decoration:none;color:var(--tinte);overflow:hidden;transition:border-color .15s}
.akarte:hover{border-color:var(--tinte-3)}
.akarte .abild{aspect-ratio:4/3;background:var(--linie-2);display:block;width:100%;object-fit:cover}
.akarte .atext{padding:12px 13px 14px}
.akarte h3{font-size:15px;font-weight:600;line-height:1.3}
.akarte .adaten{display:block;font-size:13px;color:var(--tinte-3);margin-top:5px}
.akarte .apreis{display:block;font-size:15px;font-weight:600;margin-top:8px}
.auszugleer{color:var(--tinte-3);font-size:15px;padding:20px 0}
/* Auf dem Handy zwei schmale Spalten statt einer breiten: sonst wird der
   Bestandsauszug laenger als der ganze uebrige Seiteninhalt. */
@media (max-width:560px){
  .auszug{grid-template-columns:1fr 1fr;gap:10px}
  .akarte h3{font-size:13.5px}
  .akarte .adaten{font-size:12px}
  .akarte .apreis{font-size:14px}
  .akarte .atext{padding:9px 10px 11px}
}

/* --- Knopf --- */
.knopf{display:inline-block;background:var(--gold);color:var(--tinte);border:none;border-radius:4px;
  padding:12px 22px;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:15px;
  font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.knopf:hover{background:var(--gold-tief);color:#fff}
.knopf.zweit{background:none;border:1px solid var(--linie);font-weight:500}
.knopf.zweit:hover{background:var(--grund);color:var(--tinte);border-color:var(--tinte-3)}
.knopfzeile{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* --- Nachbarorte --- */
.orte{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.orte a{display:inline-block;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:40px;padding:7px 15px;font-size:14px;text-decoration:none;color:var(--tinte-2)}
.orte a:hover{border-color:var(--gold-tief);color:var(--gold-tief)}

/* --- Fragen und Antworten --- */
.faq{border-top:1px solid var(--linie);margin-top:8px}
.faq details{border-bottom:1px solid var(--linie);padding:0}
.faq summary{cursor:pointer;padding:15px 0;font-weight:600;font-size:15.5px;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:20px;
  color:var(--tinte-3);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq .antwort{color:var(--tinte-2);font-size:15px;padding:0 0 16px;max-width:72ch}
.faq .antwort p{margin:0 0 10px}
.faq .antwort p:last-child{margin:0}

/* --- Fuss --- */
footer{background:var(--tinte);color:#CFCAC7;padding:34px 0;font-size:14px;margin-top:20px}
footer .breite{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
footer b{color:#fff;font-weight:600;display:block;margin-bottom:5px;
  font-family:"Archivo","Archivo Narrow","Helvetica Neue",Arial,sans-serif}
footer a{color:#CFCAC7}

/* --- Anfrageformular (gleiche Mechanik wie auf der Startseite) --- */
.fschicht{position:fixed;inset:0;background:rgba(35,31,32,.55);z-index:70;
  display:none;align-items:flex-start;justify-content:center;padding:22px;overflow-y:auto}
.fschicht.auf{display:flex}
.fblatt{background:var(--flaeche);border-radius:6px;max-width:520px;width:100%;
  padding:26px 26px 30px;margin:auto}
.fblatt h2{font-size:21px;margin-bottom:4px}
.fblatt .fsub{color:var(--tinte-2);font-size:14px;margin-bottom:20px}
.feld{margin-bottom:13px}
.feld label{display:block;font-size:13px;color:var(--tinte-2);margin-bottom:5px;font-weight:500}
.feld input,.feld textarea{width:100%;padding:11px 12px;border:1px solid var(--linie);
  border-radius:4px;font-family:inherit;font-size:15px;background:var(--grund);color:var(--tinte)}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--gold-tief);background:#fff}
.feld textarea{min-height:96px;resize:vertical}
.fzwei{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fhinweis{font-size:12px;color:var(--tinte-3);line-height:1.5;margin:14px 0 4px}
.fhinweis a{color:var(--gold-tief)}
.fmeldung{font-size:14px;margin:12px 0;min-height:20px}
.fmeldung.fehler{color:#B3261E}
.fdanke{text-align:center;padding:26px 0}
.fdanke h2{margin-bottom:10px}
.fdanke p{color:var(--tinte-2)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fhaken{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;
  font-size:13.5px;color:var(--tinte-2);line-height:1.45;cursor:pointer}
.fhaken input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--gold-tief)}
@media (max-width:520px){ .fzwei{grid-template-columns:1fr} }