/* Spartan Intelligence · Responsive-Korrekturen (Holger 22.10.2026: kleine und große Bildschirme, Mobil und Tablet).
   Wird nach marke.css/kopfleiste.css geladen. Nur Korrekturen, keine neuen Bausteine. */

/* 1) Kaufkasten der Vorlagen-Einzelseiten: die allgemeine site.css-Regel ".kauf" (zwei Spalten, 40 px Abstand)
      schlug auf den Kasten durch und quetschte Preis und Formular in eine schmale zweite Spalte. */
.vd .box.kauf{display:block}
/* Kaufformular und Preiszeile: das Feld stand ohne Rahmen und Abstand (die Seitenregel zielt auf <form>, hier steht ein <div class="kaufform">),
   der Zusatz "netto zzgl. USt." erschien in 30 px fett */
.kaufform input:not([type=checkbox]):not([type=radio]){display:block;width:100%;box-sizing:border-box;padding:12px;border:1px solid #bbb;border-radius:8px;margin:0 0 10px;font:inherit}
.vd .preis small{display:block;font-size:14px;font-weight:400;line-height:1.4;margin-top:4px}

/* 2) Startseiten-Hero zwischen ca. 900 und 1200 px: das Bild nimmt maximal 46 % der Breite, der Text bekommt den Rest
      (vorher feste 680 px für das Bild: Textspalte nur 50 bis 250 px breit, Überschrift brach mitten im Wort). */
@media(min-width:901px){.wh-hero .wh-hg{grid-template-columns:minmax(0,1fr) minmax(0,min(680px,46%))}}
@media(min-width:901px) and (max-width:1200px){.wh-tx{padding-right:24px}}

/* 3) Kopfleiste auf sehr schmalen Bildschirmen (320 bis 380 px): kompakteres Logo, kein Überlauf */
@media(max-width:380px){
  .si-kopf{padding:12px 12px;gap:10px}
  .si-logo{font-size:11px;letter-spacing:.08em;gap:8px}
  .si-logo img{height:32px}
  .si-menue-knopf{width:40px;height:40px}
}

/* 4) Bedienelemente der Kopfleiste auf Tablet und Handy: größere Tippflächen, Suchfeld ohne iOS-Zoom */
@media(max-width:900px){
  .si-util-in{padding:2px 14px;gap:6px}
  .si-login{display:inline-flex;align-items:center;min-height:34px;padding:0 6px}
  .si-suche input{height:34px;font-size:16px}
}

/* 5) Handy: Formularfelder mit 16 px Schrift (verhindert Zoomen beim Antippen) und bequemer Höhe, Tabellen scrollbar,
      lange Wörter brechen sauber, Überschriften trennen bei Bedarf */
@media(max-width:600px){
  input[type=email],input[type=text],input[type=search],input[type=tel],input[type=url],input[type=password],textarea,select{font-size:16px}
  .kf-mail,.vd form input:not([type=checkbox]):not([type=radio]){min-height:44px}
  details>summary{padding-top:11px;padding-bottom:11px}
  .karte{overflow-x:auto}
  main{overflow-wrap:break-word}
  main table th{font-size:12px}
  [class*="badge"]{font-size:11px}
  main input[type=checkbox]{width:20px;height:20px;flex:none}
}
@media(max-width:480px){h1,h2,h3{overflow-wrap:break-word;hyphens:auto}}

/* 6) Handy im Querformat (niedrige Fenster): die Kopfleiste klebt nicht mehr (sonst fast ein Drittel der Höhe belegt) */
@media(max-height:500px) and (max-width:1080px){.si-kopfleiste{position:static}}

/* 7) Einwilligungsbanner auf kleinen Bildschirmen kompakter (Text und beide Knöpfe bleiben gleichwertig und unverändert) */
@media(max-width:480px){
  #si-banner{padding:14px 16px;font-size:14px;line-height:1.45}
  #si-banner .si-titel{font-size:16px;margin-bottom:6px}
  #si-banner p{margin-bottom:10px}
  #si-banner button{padding:10px 14px;font-size:15px;flex:1 1 120px}
}
@media(max-height:560px){#si-banner{max-height:78vh;overflow:auto}}