/* Die Kurzfassung des Vorspanns steht nur auf dem Handy. */
.nur-handy { display: none; }

/* ==========================================================================
   Preise auf dem Handy

   Unter 640 Pixeln bekommt die Preisseite ein eigenes Layout, mit den
   Texten und Zeichen der grossen Fassung, aber anders geordnet:

     - die Muenze klein neben dem Vorspann statt gross unter dem Titel
     - die fuenf Faktoren als Kartenstapel zum Wischen, nummeriert wie
       die Ziffer im Seitenrand am Schreibtisch
     - die drei Preisstufen als Treppe, Zeichen links, Betrag gross
     - Domain und Hosting als dunkle Rechnung mit dem Serverzeichen
       und dem Monats-/Jahresschalter darin
     - die vier Inklusivpunkte als Liste, die Hinweisbloecke zum
       Aufklappen, der Rechner ueber die volle Breite

   Nur in preise.html eingebunden, damit die uebrigen Seiten nichts
   davon erben. Was ein Stylesheet nicht kann -- Knoten versetzen,
   Knoepfe zum Aufklappen -- macht der "Handy-Umbau" in js/preise.js,
   und zwar nur solange diese Abfrage greift. !important steht hier
   ausschliesslich gegen Abstaende, die im Markup als style-Attribut
   haengen; anders kommt man an die nicht.
   ========================================================================== */

@media (max-width: 640px) {

  /* ---------- Grundmasse ---------- */
  .seite-preise .sec { padding-block: 52px; }

  /* Auf kurzen Schirmen ruecken auch die uebrigen Abschnitte etwas
     zusammen -- dieselbe Rechnung wie beim Kopf. */
  @media (max-height: 740px) {
    .seite-preise .sec { padding-block: 42px; }
  }
  /* Der Kopf richtet sich nach der Bildhoehe, nicht nur nach der
     Breite: auf einem iPhone 13 mini (375 mal 697 sichtbar) endeten die
     Sprungverweise gemessen 20 Pixel ueber der Bildkante -- der Kopf
     lag also randvoll, waehrend auf einem 16 Pro Max 125 Pixel Luft
     blieben. Darum svh und nicht dvh: svh ist die Hoehe MIT den Leisten
     von Safari und bleibt beim Scrollen stehen; mit dvh waechst und
     schrumpft die Muenze, sobald sich die Leisten ein- und ausblenden. */
  .seite-preise .sec--head {
    padding-top: clamp(32px, 7svh, 56px);
    padding-bottom: clamp(44px, 9svh, 72px);
  }
  .seite-preise .h1 { font-size: clamp(40px, 12vw, 48px); }
  .seite-preise .h2 { font-size: 28px; letter-spacing: -.02em; }
  .seite-preise .lead-md { font-size: 16px; line-height: 1.6; }
  .seite-preise .grid { row-gap: 20px; }

  /* Statt Trennlinien: der Abschnitt, dessen Flaeche die Bildmitte
     kreuzt, steht voll da und wirft nach oben und unten je einen
     Schatten von sich weg; alle anderen sind abgegraut. So trennt
     nicht ein Strich die Abschnitte, sondern die Aufmerksamkeit.

     Ueber :has, damit ohne Skript nichts abgegraut bleibt -- die Klasse
     setzt js/preise.js, und ohne sie greift die Regel nicht. */
  .seite-preise main > .sec {
    position: relative;
    border-bottom: 0;
    transition: background-color .4s var(--ease);
  }

  /* Abgedunkelt, nicht ausgeblendet: der Schleier ist ein dunkles
     Grau und liegt sehr durchsichtig als Grund im Abschnitt, die
     Deckkraft nimmt nur der Inhalt zurueck. Er sitzt am Grund und die
     Deckkraft am Raster darin, weil eine Deckkraft am Abschnitt selbst
     auch ihren eigenen Grund mit wegblassen wuerde. */
  .seite-preise main:has(.ist-mitte) > .sec:not(.ist-mitte) {
    background: rgba(17, 17, 17, .05);
  }

  .seite-preise main > .sec > .grid { transition: opacity .4s var(--ease); }
  .seite-preise main:has(.ist-mitte) > .sec:not(.ist-mitte) > .grid { opacity: .62; }

  /* Beide Baender haengen am mittigen Abschnitt selbst, nicht am
     Nachbarn: der ist abgegraut, und seine Deckkraft nimmt alles
     darin mit -- das Band waere dann genauso blass wie er.

     Pseudoelemente statt box-shadow, weil ein Schatten mit negativem
     Streuwert (gegen das Austreten zur Seite) die Kante nicht
     erreicht: gemessen blieben links und rechts neun Pixel blank. */
  .seite-preise main > .sec::before,
  .seite-preise main > .sec::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s var(--ease);
  }

  .seite-preise main > .sec::before {
    bottom: 100%;
    background: linear-gradient(to top, rgba(17, 17, 17, .07), rgba(17, 17, 17, 0));
  }

  .seite-preise main > .sec::after {
    top: 100%;
    background: linear-gradient(to bottom, rgba(17, 17, 17, .07), rgba(17, 17, 17, 0));
  }

  .seite-preise main > .sec.ist-mitte::before,
  .seite-preise main > .sec.ist-mitte::after { opacity: 1; }

  /* Zwei Kanten bleiben blank: ueber dem Seitenkopf steht die
     Kopfzeile, die durchscheint, und unter dem Schluss der dunkle
     Fuss. */
  .seite-preise main > .sec--head::before,
  .seite-preise main > .sec--closing::after,
  .seite-preise main > .sec--last::after { display: none; }

  /* ---------- Kopf: Titel, Vorspann, Muenze ---------- */
  /* Alles untereinander statt Text und Muenze nebeneinander: neben der
     Muenze blieben der Textspalte bei 390 Pixeln nur noch 119, sobald
     die Muenze gross wird. Uebereinander darf sie die ganze Breite
     ausnutzen, und der Kopf wird dabei von selbst laenger.

     Das Videobild traegt rund 14 Prozent leeren Rand; der negative
     Abstand zieht ihn nach rechts heraus, damit die Muenze selbst und
     nicht ihr leerer Rahmen an der Kante steht. Genau 24 Pixel, das
     Seitenpolster des Abschnitts: mit den vollen 14 Prozent (bei 390
     Pixeln sind das 48) ragte die Flaeche 24 Pixel aus dem Bild und zog
     einen Seitenlauf nach sich. */
  .sec--head .grid { display: block; }

  .sec--head .lead--dicht {
    margin-top: clamp(20px, 4svh, 32px);
    font-size: 18px;
    line-height: 1.5;
  }
  .sec--head .lead--dicht:not(.nur-handy) { display: none; }
  .sec--head .nur-handy { display: block; }

  /* Quadratisch: unter 900 Pixeln macht main.css die Flaeche 16 zu 9
     flach, weil der Lauf dort neben einer Ueberschrift stand. Hier hat
     er eine eigene Zeile, und flach waere die Muenze nur noch halb so
     hoch wie breit -- gemessen 180 statt 320 Pixel. */
  .sec--head .kopfvideo {
    width: min(clamp(260px, 76vw, 420px), 40svh);
    margin: clamp(20px, 4svh, 32px) -24px 0 auto;
  }

  .sec--head .kopfvideo__standbild { aspect-ratio: 1 / 1; }

  /* Die beiden Verweise unter der Muenze, linksbuendig. */
  .sec--head .jumplinks {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: clamp(28px, 5.5svh, 44px);
  }

  @media (max-width: 360px) {
    .sec--head .lead--dicht { font-size: 16px; }
  }

  /* ---------- Fuenf Faktoren: Kartenstapel zum Wischen ---------- */
  /* Die Karten laufen ueber die volle Breite und schneiden am rechten
     Rand an, damit man sieht, dass es weitergeht. Die Nummer auf der
     Karte ist die Ziffer, die am Schreibtisch im Seitenrand steht. */
  #faktoren .faktoren {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 32px -24px 0 !important;
    padding: 0 24px 4px;
    scrollbar-width: none;
    counter-reset: faktor;
  }

  #faktoren .faktoren::-webkit-scrollbar { display: none; }

  #faktoren .rowline {
    flex: 0 0 min(78%, 300px);
    scroll-snap-align: start;
    scroll-margin-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 20px 22px;
    border: 1px solid var(--hairline-strong);
    counter-increment: faktor;
  }

  #faktoren .rowline::before {
    content: counter(faktor);
    font-size: 52px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.04em;
  }

  #faktoren .rowline h3 { margin-top: 22px; font-size: 18px; }
  #faktoren .rowline p { margin-top: 10px; font-size: 15px; line-height: 1.55; flex: 1; }

  #faktoren .rowline .tag {
    margin-top: 20px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-4);
    text-align: left;
  }

  /* ---------- Grobe Einstufung: drei Stufen ---------- */
  /* Alle drei buendig untereinander, jede unter ihrer eigenen Linie.
     Das Zeichen steht im Fluss links neben dem Text statt ueber der
     Karte zu schweben. */
  #einstufung .cards-3 { display: block; margin-top: 28px !important; }

  #einstufung .price-card--ikon {
    display: grid;
    grid-template-columns: 76px 1fr;
    column-gap: 12px;
    align-items: start;
    height: auto;
    padding: 14px 0 18px;
    border-top: 2px solid var(--ink);
  }

  /* Ueber der ersten Stufe keine Linie: dort trennt sie nichts, die
     Ueberschrift steht schon darueber. Die beiden anderen behalten ihre,
     sie trennen die Stufen voneinander. */
  #einstufung .cards-3 > :first-child { border-top: 0; padding-top: 0; }


  /* Mittig in seiner Spalte: das erste Zeichen ist quadratisch, die
     beiden anderen sind breiter (viewBox 68 statt 48). Linksbuendig
     stand das erste dadurch 18 Pixel weiter aussen als die anderen. */
  #einstufung .price-card__icon {
    position: static;
    grid-row: 1 / span 4;
    justify-self: center;
    width: auto;
    height: 54px;
    margin-top: 2px;
    transform: none;
  }

  #einstufung .price-card h3 { grid-column: 2; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
  #einstufung .price-card .amount { grid-column: 2; margin-top: 4px; font-size: 26px; }
  #einstufung .price-card .per { grid-column: 2; margin-top: 6px; }
  #einstufung .price-card p { grid-column: 2; margin-top: 10px; font-size: 14px; line-height: 1.5; }

  /* Eigene Bewegung: die Keyframes der grossen Fassung tragen das
     translate(-50%, -100%) des schwebenden Zeichens mit, hier steht
     es im Fluss. Aufblitzen und Schweben bleiben dieselben. */
  #einstufung .price-card--ikon.wartet .price-card__icon { animation: none; opacity: 0; }

  /* Nach der wartet-Regel, weil ein Zeichen beide Klassen traegt,
     sobald es einmal im Bild war -- die spaetere gewinnt. */
  #einstufung .price-card__icon,
  #einstufung .price-card--ikon.ist-sichtbar .price-card__icon {
    opacity: 1;
    animation:
      handy-ikon-einfaden .85s cubic-bezier(.2, .6, .2, 1) var(--stufe) both,
      handy-ikon-schweben var(--schwebe) ease-in-out calc(var(--stufe) + .85s) infinite;
  }

  @keyframes handy-ikon-einfaden {
    0%       { opacity: 0; transform: translateY(12px); fill: var(--ink); filter: drop-shadow(0 0 0 transparent); }
    8%       { fill: var(--ink); filter: drop-shadow(0 0 0 transparent); }
    26%, 36% { fill: #fff; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .26)); }
    52%      { fill: var(--ink); filter: drop-shadow(0 0 0 transparent); }
    100%     { opacity: 1; transform: none; fill: var(--ink); filter: drop-shadow(0 0 0 transparent); }
  }

  @keyframes handy-ikon-schweben {
    0%, 100% { transform: none; }
    50%      { transform: translateY(-5px); }
  }

  /* ---------- Laufende Kosten: die Rechnung ---------- */
  /* Dunkler Kasten wie die Infoblase: oben links das Serverzeichen in
     Papierfarbe, rechts der Schalter, darunter je eine Zeile fuer
     Domain und Hosting mit dem Betrag am rechten Rand. Zeichen und
     Schalter versetzt js/preise.js hier hinein. Das Zeichen bekommt
     --bg umgedreht, weil seine Kugel und die Schriftkontur damit den
     Grund freiraeumen -- der ist hier dunkel. */
  #laufend .cards-2 {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: end;
    margin-top: 28px !important;
    padding: 20px 22px 6px;
    background: var(--ink);
    color: var(--bg);
  }

  #laufend .cards-2 .kopfzeichen {
    grid-column: 1;
    position: static;
    margin: 0;
    justify-content: flex-start;
    color: #fbfaf8;
    --bg: #111;
  }

  #laufend .cards-2 .kopfzeichen svg { width: 104px; }

  /* Das Wort in der Kugel: auf dem iPhone setzt die Systemschrift
     breiter, und mit der engen Laufweite samt heller Kontur je Zeichen
     klebten die Buchstaben aneinander. Etwas weiter und eine halbe
     Stufe kleiner -- die Kugel selbst bleibt, wie sie ist. */
  #laufend .cards-2 .kopfzeichen__wort { font-size: 10.5px; letter-spacing: .08em; }

  #laufend .cards-2 .zeitschalter { grid-column: 2; margin: 0 0 8px; }
  #laufend .cards-2 .switch { background: transparent; border-color: rgba(251, 250, 248, .4); }
  #laufend .cards-2 .switch__laeufer { background: var(--bg); }
  #laufend .cards-2 .switch__seite { padding: 15px 14px; font-size: 14px; color: rgba(251, 250, 248, .8); }
  #laufend .cards-2 .switch__seite[aria-pressed="true"] { color: var(--ink); }
  #laufend .cards-2 .switch__seite:focus-visible { outline-color: var(--bg); }

  #laufend .price-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    align-items: baseline;
    height: auto;
    margin-top: 18px;
    padding: 16px 0 18px;
    border-top: 1px solid rgba(251, 250, 248, .22);
  }

  #laufend .price-card + .price-card { margin-top: 0; }
  #laufend .tipwrap { grid-column: 1; grid-row: 1; }
  #laufend .price-card h3 { font-size: 16px; }

  #laufend .price-card .amount {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 20px;
    letter-spacing: -.02em;
    text-align: right;
    white-space: nowrap;
  }

  #laufend .price-card .per {
    grid-column: 2;
    grid-row: 2;
    margin-top: 4px;
    text-align: right;
    color: rgba(251, 250, 248, .55);
  }

  #laufend .price-card p {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 12px;
    max-width: none;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(251, 250, 248, .72);
  }

  #laufend .price-card .link--inline { color: var(--bg); border-bottom-color: rgba(251, 250, 248, .4); }
  #laufend .info-dot { border-color: rgba(251, 250, 248, .45); color: rgba(251, 250, 248, .85); }

  /* Die Blase dreht die Farben um, sie liegt jetzt auf dunklem Grund.
     Breite: Fenster abzueglich Seiten- und Kastenpolster. */
  #laufend .cards-2 .tip { background: var(--bg); color: var(--ink-2); width: calc(100vw - 92px); }
  #laufend .cards-2 .tip strong { color: var(--ink); }

  /* ---------- Hinweisbloecke: aufklappbar ---------- */
  /* Festpreis, eigener Server, Fotos vor Ort: die Titel bleiben
     stehen, der Text kommt auf Tippen. Der Knopf stammt aus
     js/preise.js; ohne ihn (kein Skript) bleibt der Text offen. */
  .seite-preise .infoblock {
    display: block;
    margin-top: 32px;
    padding-top: 0;
    border-top: 1px solid var(--hairline-strong);
  }

  .seite-preise .infoblock h3 { margin: 0; }

  .seite-preise .infoblock__knopf {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
  }

  .seite-preise .infoblock__knopf .tag { margin-left: auto; font-size: 13px !important; }

  .seite-preise .infoblock__knopf::after {
    content: '+';
    flex: 0 0 auto;
    width: 20px;
    margin-left: auto;
    text-align: right;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink-4);
  }

  .seite-preise .infoblock__knopf:has(.tag)::after { margin-left: 0; }
  .seite-preise .infoblock.ist-offen .infoblock__knopf::after { content: '–'; }

  /* Auf- und zufahren wie beim FAQ auf der Arbeit-Seite: die Hoehe
     laeuft ueber grid-template-rows von 0fr auf 1fr, der Kasten darin
     schneidet ab. Das braucht keine gemessene Hoehe und geht darum auch
     bei umbrechendem Text sauber auf. Der Inhalt faedt dabei ein und
     kommt ein Stueck von oben. Den Kasten setzt js/preise.js. */
  .seite-preise .infoblock__falt {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s var(--ease);
  }

  .seite-preise .infoblock__falt > div { overflow: hidden; }

  .seite-preise .infoblock.ist-offen .infoblock__falt { grid-template-rows: 1fr; }

  .seite-preise .infoblock__falt > div > * {
    margin: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease,
                transform .38s var(--ease),
                padding-bottom .38s var(--ease);
  }

  .seite-preise .infoblock.ist-offen .infoblock__falt > div > * {
    opacity: 1;
    transform: none;
    transition: opacity .3s ease .08s,
                transform .38s var(--ease),
                padding-bottom .38s var(--ease);
  }

  .seite-preise .infoblock.ist-offen .infoblock__falt > div > :last-child { padding-bottom: 22px; }

  .seite-preise .infoblock p { font-size: 15px; line-height: 1.6; }

  /* ---------- Keine extra Kosten: Liste mit Zeichen ---------- */
  #inklusive .cards-4--ikonen { display: block; margin-top: 24px; }

  /* Der Text steht links, das Zeichen rechts am Rand -- die Spalte ist
     breiter als das Zeichen, die paar Pixel sind der Freiraum, in dem
     es fuer sich steht. */
  #inklusive .tcard {
    display: grid;
    grid-template-columns: 1fr 60px;
    column-gap: 18px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid var(--hairline-strong);
  }

  #inklusive .cards-4--ikonen > .tcard:first-child { border-top: 2px solid var(--ink); }

  /* Das Zeichen spannt ueber Titel und Text und steht darin mittig --
     an der Oberkante ausgerichtet sass es bei den kurzen Zeilen zu
     hoch. */
  #inklusive .ikon3d {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    width: 44px;
    height: 44px;
    transform: none;
  }

  /* Zeichen und Titel der ersten Karte umschalten: wer hier liest,
     sitzt am Handy -- das Versprechen ist die Ansicht, die er gerade
     nicht sieht. */
  #inklusive .zeichen--handy,
  #inklusive .titel--handy { display: none; }
  #inklusive .zeichen--schreibtisch { display: block; }
  #inklusive .titel--schreibtisch { display: inline; }

  #inklusive .tcard h3 { grid-column: 1; font-size: 16px; }
  #inklusive .tcard p { grid-column: 1; margin-top: 6px; font-size: 14px; line-height: 1.5; }

  /* ---------- Preis schaetzen ---------- */
  /* Der Kasten laeuft ueber die volle Breite; die Antworten sind
     Zeilen mit einem Punkt am rechten Rand wie bei einer Auswahl, der
     Weiter-Knopf nimmt die ganze Breite. */
  #schaetzen .panel { margin: 24px -24px 0; border-left: 0; border-right: 0; }
  #schaetzen .panel__body { padding: 24px 24px 28px; }
  #schaetzen .progress { height: 3px; }
  #schaetzen .panel__question { font-size: 22px; }
  #schaetzen .options { margin-top: 24px; gap: 8px; }

  #schaetzen .option {
    display: grid;
    grid-template-columns: 1fr 18px;
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
    align-content: center;
    min-height: 64px;
    padding: 14px 16px;
  }

  #schaetzen .option .t,
  #schaetzen .option .n { grid-column: 1; }

  #schaetzen .option::after {
    content: '';
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1.5px solid var(--hairline-strong);
    border-radius: 50%;
  }

  #schaetzen .option.active::after {
    border-color: var(--bg);
    background: radial-gradient(circle, var(--bg) 0 4.5px, transparent 5px);
  }

  #schaetzen .panel__nav {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
  }

  #schaetzen .panel__nav .btn { justify-content: space-between; padding: 16px 20px; }
  #schaetzen .panel__nav .btn-back { align-self: flex-start; padding: 8px 0; }
  #schaetzen [data-result] .panel__nav { flex-direction: column; }
  #schaetzen .panel__nav .btn-ghost { align-self: flex-start; }

  /* ---------- Schluss ---------- */
  .seite-preise .sec--closing-weit { padding-block: 64px 72px; }
  .seite-preise .sec--closing .h2.center { text-align: left; font-size: 34px; }

  .seite-preise .closing-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 28px;
  }

  .seite-preise .closing-actions .btn { justify-content: space-between; }
  .seite-preise .closing-actions .link { align-self: flex-start; }
  .seite-preise .sec--closing .note.center { text-align: left; margin-top: 18px; }

  @media (prefers-reduced-motion: reduce) {
    #einstufung .price-card__icon { animation: none; opacity: 1; transform: none; }
  }
}