/* Effenberger — Tablet und Handy. Nur Breitenabfragen bis 1199px.
   Handy ist eine eigene Anordnung: erster Schirm voll, Leistungen als Liste,
   Ablauf als Zeitleiste, Preise 2 + 1 quer, Stimmen als Wischreihe, Kontakt als Kacheln. */

@media (max-width:1199px){
  .kopf-nav a{padding:10px 8px;font-size:15px}
  .kopf-nr{display:none}
  .kopf-kurz{display:inline}
  .kopf-zeile{gap:14px}
  .held-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr)}
  .leistungsliste a{grid-template-columns:60px minmax(0,1fr)}
  .fuss-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fuss-marke{grid-column:1/-1;display:flex;align-items:center;gap:24px}
  .fuss-marke p{margin:0}
  .leistungen-raster{grid-template-columns:minmax(0,1fr)}
  .leistungen-kopf{position:static}
}

@media (max-width:999px){
  :root{--kopf-h:70px}
  .kopf-nav,.kopf-termin{display:none}
  .kopf-tel{margin-left:auto}
  .kopf-menue{display:flex}
  .marke img{height:54px}
  .held-raster{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:28px}
  .t-lang{display:none}
  .t-kurz{display:inline}
  .bewerben-raster{grid-template-columns:minmax(0,1fr)}
  .bewerben-raster .band-knoepfe{flex-direction:row;flex-wrap:wrap}
  .held-unter{max-width:none}
  .aktuell-zeile{flex-wrap:wrap}
  .aktuell-titel{width:100%;padding:16px 0 4px}
  .aktuell a{border-left:0;padding:12px 16px 14px 0}
  .leistungen-raster,.team-raster,.leistung-raster,.stelle-raster,.anfrage-raster{grid-template-columns:minmax(0,1fr)}
  .fragen{grid-template-columns:minmax(0,1fr)}
  .wege{grid-template-columns:minmax(0,1fr)}
  .band-kopf{grid-template-columns:minmax(0,1fr) 34%}
  .leistungen-kopf{position:static}
  .ablauf li{padding-right:22px}
  .preistafel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preis-quer{grid-column:1/-1;border-left:0;border-top:1px solid var(--linie)}
  .schluss{align-items:start}
  .fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Hochkant (iPad, Hochformat-Monitor): Held stapeln, die Hoehe traegt beide Bloecke */
@media (max-width:1199px) and (orientation:portrait){
  .held-raster{grid-template-columns:minmax(0,1fr);row-gap:clamp(24px,3svh,48px)}
  .motivkarte{padding:clamp(12px,1.6vw,20px)}
  .t-lang{display:inline}
  .t-kurz{display:none}
}

@media (max-width:699px){
  .held-raster{grid-template-columns:minmax(0,1fr)}
  .stimme-gross{grid-template-columns:minmax(0,1fr);grid-template-areas:"sterne" "zitat" "name"}
  .ablauf{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:36px}
  .ablauf::before{left:21px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  html.js .ablauf.linie::before{transform:scaleY(0);transform-origin:50% 0}
  html.js .ablauf.linie.in::before{transform:none}
  .ablauf li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;padding-right:0}
  .ablauf-nr{grid-row:1/3;margin:0}
  .ablauf h3{align-self:center;margin:0 0 4px}
  .ablauf p{grid-column:2}
}

@media (max-width:599px){
  :root{--kopf-h:64px}
  body{font-size:16px}
  .d-only{display:none}
  .m-only{display:block}
  .d-only.d-only{display:none}
  h2{font-size:clamp(28px,7.8vw,34px);margin-bottom:14px}

  /* Kopfleiste */
  .kopf-zeile{gap:10px}
  .marke img{height:46px}
  .kopf-nr{display:none}
  .kopf-kurz{display:inline}
  .kopf-tel{min-height:46px;padding:10px 14px}
  .kopf-menue{height:46px;padding:0 11px}

  /* Erster Schirm fuellt genau die Hoehe, die Tafel traegt den Rest */
  .held{justify-content:flex-start;min-height:calc(100svh - var(--kopf-h));padding-block:22px 18px}
  .held-raster{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .held-titel{margin-bottom:14px}
  .held-unter{font-size:17px;margin-bottom:18px}
  .held-knoepfe{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .knopf-gross{justify-content:flex-start;min-height:54px;font-size:17px}
  .motivkarte{flex:1;padding:12px;gap:10px}
  .bildkarte-bild,.bildkarte-bild .foto{aspect-ratio:16/10;height:100%}
  .bandbild,.bandbild .foto,.gwbild,.gwbild .foto,.randbild,.randbild .foto{aspect-ratio:16/10}
  .breitbild,.breitbild .foto{aspect-ratio:16/9}
  .held-status{margin-top:4px;font-size:14px}
  .tafel{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 18px 16px}
  .tafel-status{font-size:18px;margin-bottom:8px}
  .tafel-zeiten{font-size:15px}
  .tafel-zeiten th,.tafel-zeiten td{padding-block:7px}
  .tafel-adr{margin-top:12px;padding-top:12px}

  .aktuell a{flex:1 1 100%;padding:11px 0;border-top:1px solid var(--linie-d)}
  .aktuell-titel{font-size:20px}

  .abschnitt{padding-block:48px}
  .band{padding-block:56px}
  .leistungsliste a{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:16px 0}
  .nr{font-size:19px}
  .lt b{font-size:20px}
  .nicht{font-size:14px}

  .band-knoepfe{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:30px}
  .band-knoepfe .knopf{justify-content:flex-start}
  .ablauf{gap:18px}
  .ablauf h3{font-size:19px}
  .ablauf p{font-size:15px}

  .preise-kopf{margin-bottom:20px}
  .preise-hinweis{margin:0;font-size:14px}
  .preis{padding:18px 14px}
  .preis h3{font-size:16px}
  .preis .betrag{font-size:30px;margin:8px 0 0}
  .zahl-feld{padding:16px 8px 0 0}
  .zahl-feld + .zahl-feld{padding-left:10px}
  .zahlen{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr)}
  .zahl{font-size:clamp(19px,6.6vw,26px)}
  .zahl-text{font-size:13px}
  .preis .betrag-klein{font-size:21px;padding-block:4px}
  .preis p:last-child{display:none}
  .preis-quer{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
  .marke-aktion{font-size:12px;margin-bottom:6px}

  .stimmen-reihe{display:flex;gap:12px;margin-top:24px;margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);scrollbar-width:none}
  .stimmen-reihe::-webkit-scrollbar{display:none}
  .stimme,.stimme-gross{flex:0 0 86%;min-width:0;scroll-snap-align:start;padding:22px 20px}
  .stimme-gross{display:block}
  .stimme-gross blockquote p{font-size:18px}
  .stimme blockquote p{font-size:16px}
  .wisch-punkte.m-only{display:flex}
  .stimme blockquote.m-only{display:block}

  .gw-raster,.kontakt-raster{grid-template-columns:minmax(0,1fr)}
  .wege{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gw-raster p{font-size:16px}
  .hotrod{width:92%;margin-top:4px;justify-self:start}
  .band-kopf{grid-template-columns:minmax(0,1fr);gap:18px}
  .ersatz-bild{width:44%}

  .person{flex-direction:column;align-items:flex-start;gap:10px}
  .person-zeichen{width:56px;height:56px;font-size:21px}
  /* Inhalts-Diaet: was Liste, Kacheln oder Tafel schon sagen */
  .ablauf p,#team .team-raster > div > p.rv,#kontakt .kontakt-raster > div > p.rv,.leistungen-kopf > p.rv:not(.nicht),.preise-hinweis,.seitenkopf-text,.erwartet,.band-hinweis,.kontakt-raster .tafel-adr{display:none}
  .stelle{padding:22px 18px}
  .stelle p{font-size:15px}

  .wege{gap:10px}
  .wege a{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:8px;padding:14px}
  .weg-ic{grid-row:auto;width:42px;height:42px}
  .wege b{font-size:15px}
  .wege a > span:not(.weg-ic){font-size:13px}

  .seitenkopf{padding-block:40px 44px}
  .seitenkopf h1{font-size:clamp(34px,9.6vw,44px)}
  .seitenkopf-text{font-size:16px}
  .leistung-kopf .nr{font-size:26px;margin-bottom:4px}
  .leistung-kopf h2{font-size:clamp(26px,7.4vw,32px)}
  .leistung-kopf p{display:none}
  .haken li{padding:13px 0 13px 32px;font-size:15px}
  .haken li::before{top:18px}
  .leistung{padding-block:56px}
  .leistung-kurz{font-size:16px;padding-top:12px;border-top:3px solid var(--navy)}
  #hu-au .leistung-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
  #hu-au .leistung-kopf .plakette{grid-column:2;grid-row:1/4;width:32vw;max-width:150px;margin:0}
  #hu-au .leistung-kopf p.hu-kurz{display:block;margin:0;font-size:15px}
  .schluss{display:block}
  .schluss .band-knoepfe{margin-top:24px}
  .haken-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border-top:0}
  .haken-kacheln li{padding:14px 12px;border:2px solid var(--linie);border-radius:var(--r);font-size:14px}
  .haken-kacheln li::before{display:none}
  .haken-wisch{display:flex;gap:10px;border-top:0;margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .haken-wisch::-webkit-scrollbar{display:none}
  .haken-wisch li{flex:0 0 62%;scroll-snap-align:start;padding:14px 12px;border:2px solid var(--linie);border-radius:var(--r)}
  .haken-wisch li::before{display:none}
  .schluss h2{font-size:clamp(26px,7.6vw,34px)}

  .formular{grid-template-columns:minmax(0,1fr);padding:18px}
  .frage h3{font-size:17px}
  .brotkrumen{margin-bottom:10px}

  .fuss{padding-top:44px;padding-bottom:84px}
  .fuss-raster{grid-template-columns:minmax(0,1fr);gap:26px}
  .fuss-marke{display:block}
  .fuss-marke p{display:none}
  .fuss-logo img{height:70px}
  .fuss-spalte:nth-child(2){display:none}
  .fuss a{display:inline-block;padding-block:12px}
  .fuss ul{gap:0}
  .fuss-recht button{padding:13px 8px}
  .fuss-ende{margin-top:30px;flex-direction:column;align-items:flex-start}

  .leiste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linie);transform:translateY(110%);transition:transform .3s}
  .leiste.an{transform:none}
  .leiste .knopf{justify-content:center}

  .fenster{align-items:flex-end;padding:0}
  .fenster-box{max-height:92dvh;border-radius:var(--r) var(--r) 0 0;padding:20px 18px 24px}
  .fenster-kopf h2{font-size:25px}
  .fenster-wege{display:grid;grid-template-columns:minmax(0,1fr)}
  .menue-liste a{font-size:22px}
  .schema{width:78%;margin-top:18px}
}

/* Kleine Handys (iPhone SE, 375x667): erster Schirm soll genau passen, nicht 120 % */
@media (max-width:599px) and (max-height:720px){
  .held{padding-block:16px 12px}
  .held-raster{gap:14px}
  .held-titel{margin-bottom:10px}
  .held-unter{margin-bottom:12px}
  .knopf-gross{min-height:48px;padding-block:10px}
  .motivkarte{padding:10px;gap:8px}
  .held-knoepfe{gap:8px}
}

@media (max-width:379px){
  .kopf-menue span{display:none}
  .marke img{height:40px}
  .kopf-tel{padding:10px 11px;font-size:15px}
  .preis{padding:16px 10px}
  .preis .betrag{font-size:29px}
  .wege{grid-template-columns:minmax(0,1fr)}
}