/* Hosting-Bestellung: ergänzt /assets/site.css (gleiche Farben, flach, 2 px Ecken) */

.hosting-held__in { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hosting-held h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); overflow-wrap: anywhere; }
.hosting-held h1 em { display: block; font-size: .62em; margin-top: .25em; letter-spacing: -.005em; }


/* Formular */
.bestellen .abschnitt__kopf { margin-bottom: 2rem; }
.meldung { max-width: 46rem; margin-bottom: 1.5rem; padding: .9rem 1.1rem; border-left: 4px solid #B42318; background: #FBEAE7; color: #7A1A11; }
.formular { max-width: 46rem; display: grid; gap: 2.2rem; }
.block { margin: 0; padding: 0; border: 0; border-top: 4px solid var(--ink); padding-top: 1.4rem; display: grid; gap: 1.2rem; min-width: 0; }
.block > legend { float: left; width: 100%; padding: 0; margin-bottom: .2rem; font: 600 1.35rem/1.2 var(--titel); display: flex; align-items: center; gap: .8rem; }
.block > legend span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--ink); border-radius: var(--r); font: 600 .95rem/1 var(--sans); }
.block > legend + * { clear: both; }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: end; }
.reihe--plz { grid-template-columns: 7rem 1fr; }
.feld { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.feld label, .wahl legend { font-weight: 600; font-size: 1rem; }
.frei { font-weight: 400; color: var(--grau); font-size: .88rem; }
.hilfe { color: var(--grau); font-size: .9rem; line-height: 1.45; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 3rem; padding: .65rem .8rem; border: 1.5px solid #B9C0C8; border-radius: var(--r); background: var(--weiss); font-size: 1rem; }
.feld textarea { resize: vertical; line-height: 1.5; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--glas); outline-offset: 1px; border-color: var(--ink); }
[aria-invalid="true"] { border-color: #B42318 !important; }
.fehler { color: #B42318; font-size: .92rem; font-weight: 600; }
.wahl { margin: 0; padding: 0; border: 0; display: grid; gap: .45rem; min-width: 0; }
.wahl legend { padding: 0; margin-bottom: .3rem; }
.wahl__option, .bestaetigen { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .8rem; border: 1px solid var(--linie); border-radius: var(--r); background: var(--grund); cursor: pointer; font-size: 1rem; }
.wahl__option:has(input:checked) { border-color: var(--ink); background: var(--glas-blass); }
.wahl__option input, .bestaetigen input { flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--ink); }
.bestaetigen { background: var(--weiss); }
.bestaetigen a { color: var(--glas-text); }
.bestaetigen.ist-fehler { border-color: #B42318; }
.zusammenfassung { padding: 1rem 1.1rem; background: var(--grund); border-left: 4px solid var(--glas); }
.zusammenfassung b { font-weight: 600; overflow-wrap: anywhere; }
.knopf--gross { justify-self: start; min-height: 3.4rem; font-size: 1.05rem; white-space: normal; text-align: left; cursor: pointer; }
.sicher { display: flex; gap: .6rem; align-items: flex-start; color: var(--grau); font-size: .92rem; }
.sicher svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* DNS */
.dns-anleitung { max-width: 72rem; }
.dns__rahmen { overflow-x: auto; border-top: 1px solid var(--ink); }
.dns { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 36rem; }
.dns th { text-align: left; font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); padding: .9rem .8rem .9rem 0; border-bottom: 1px solid var(--linie); }
.dns td { padding: .9rem .8rem .9rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.dns code { font: 500 .95rem/1.4 ui-monospace, "SF Mono", Consolas, monospace; background: var(--weiss); border: 1px solid var(--linie); padding: .1rem .4rem; border-radius: var(--r); overflow-wrap: anywhere; }
.dns small { display: block; color: var(--grau); font-size: .85rem; margin-top: .2rem; }
.folgt { color: var(--grau); font-style: italic; }
.dns__schritte { margin-top: 2rem; padding-left: 1.3rem; display: grid; gap: .8rem; max-width: 46rem; color: var(--ink-2); }
.dns__schritte b { color: var(--ink); }
.dns__hinweis { margin-top: 1.6rem; max-width: 46rem; color: var(--ink-2); }
.dns__hinweis a { color: var(--glas-text); }

/* Fragen */
.fragen details { max-width: 46rem; border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; font: 600 1.1rem/1.35 var(--sans); list-style: none; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: .2rem; top: .95rem; font: 600 1.4rem/1 var(--titel); color: var(--glas-text); }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { padding: 0 0 1.2rem; color: var(--ink-2); }

/* Bedingungen und Dankeseite */
.bedingungen__titel { font: 600 clamp(1.8rem, 3.4vw, 2.6rem)/1.1 var(--titel) !important; border: 0 !important; padding: 0 !important; margin: 0 0 1rem !important; }
.danke__schritte { padding-left: 1.3rem; display: grid; gap: .7rem; color: var(--ink-2); }
.danke__schritte b { color: var(--ink); }
.danke__schritte a { color: var(--glas-text); }

@media (max-width: 60rem) {
  .hosting-held__in { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .reihe { grid-template-columns: 1fr; }
  .reihe--plz { grid-template-columns: 6rem 1fr; }
  .dns { min-width: 0; }
  .dns thead { display: none; }
  .dns tr { display: grid; grid-template-columns: 5rem 1fr; gap: .2rem .6rem; padding: .8rem 0; border-bottom: 1px solid var(--linie); }
  .dns td { border: 0; padding: 0; }
  .dns td:nth-child(1) { grid-column: 1 / -1; }
}

/* Ohne Vorschaubilder: Text allein */
.hosting-held--schmal .hosting-held__in { grid-template-columns: minmax(0, 46rem); }

/* Preis als dunkles Band über die ganze Breite; oben die Kante aus Tinte und Glas wie im Seitenkopf */
.preisband { position: relative; background: var(--ink); color: var(--auf-dunkel); padding: clamp(2.6rem, 5vw, 3.6rem) 0; }
.preisband::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--glas) 0 28%, var(--ink-2) 28%); }
.preisband__in { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem clamp(2rem, 5vw, 4.5rem); align-items: center; }
.preisband__betrag { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: start; column-gap: .5rem; font: 600 clamp(3.4rem, 7vw, 5.4rem)/.9 var(--titel); letter-spacing: -.03em; color: #fff; }
.preisband__betrag small { font: 600 1rem/1 var(--sans); letter-spacing: .16em; color: var(--glas-hell); margin-top: .45rem; }
.preisband__betrag span { grid-column: 2; font: 400 1rem/1 var(--sans); letter-spacing: 0; color: var(--auf-dunkel-2); margin-top: .7rem; }
.preisband__liste { list-style: none; padding: 0 0 0 clamp(2rem, 5vw, 4.5rem); border-left: 1px solid var(--linie-dunkel); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; }
.preisband__liste li { display: flex; gap: .8rem; align-items: center; font: 600 1.05rem/1.35 var(--sans); }
.preisband__liste li::before { content: ""; flex: none; width: 1rem; height: 3px; background: var(--glas-hell); transform: rotate(-43deg); }
.preisband__hinweis { grid-column: 1 / -1; padding-top: 1.4rem; border-top: 1px solid var(--linie-dunkel); color: var(--auf-dunkel); font-size: 1.05rem; }
.preisband__hinweis b { color: var(--glas-hell); font-weight: 600; }

/* Vorschau der neuen Website: Computer und Handy (flach, nur Linien) */
.geraete { position: relative; display: block; padding: 0 clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem) 0; text-decoration: none; }
.geraete__browser { display: block; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--weiss); overflow: hidden; }
.geraete__leiste { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border-bottom: 1.5px solid var(--ink); background: var(--grund); }
.geraete__leiste i { width: .55rem; height: .55rem; border: 1.5px solid var(--grau); border-radius: 50%; }
.geraete__leiste b { flex: 1; margin-left: .8rem; padding: .2rem .7rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); font: 400 .78rem/1.3 var(--sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geraete__browser img { width: 100%; height: auto; }
.geraete__handy { position: absolute; right: 0; bottom: 0; width: 27%; padding: .45rem; border: 1.5px solid var(--ink); border-radius: 1.1rem; background: var(--ink); }
.geraete__handy img { width: 100%; height: auto; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; border-radius: .75rem; }
.geraete:hover .geraete__browser, .geraete:hover .geraete__handy { border-color: var(--glas-text); }
@media (max-width: 60rem) {
}

@media (max-width: 40rem) {
  .preisband__in { grid-template-columns: 1fr; }
  .preisband__liste { grid-template-columns: 1fr; padding: 1.4rem 0 0; border-left: 0; border-top: 1px solid var(--linie-dunkel); }
}

/* Bereits nachgeschaute DNS-Angaben im Formular und Hinweis beim Kündigen */
.bekannt { padding: 1rem 1.1rem; background: var(--glas-blass); border-left: 4px solid var(--glas); display: grid; gap: .7rem; }
.bekannt__titel { font-weight: 600; }
.bekannt__titel small { font-weight: 400; color: var(--grau); font-size: .88rem; }
.bekannt dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; font-size: 1rem; }
.bekannt dt { color: var(--ink-2); }
.bekannt dd { margin: 0; font-weight: 600; }
.dns__warnung { margin-top: 1.6rem; max-width: 46rem; padding: 1rem 1.1rem; border-left: 4px solid #B54708; background: #FEF0E1; color: #5A2A04; }
@media (max-width: 40rem) {
  .bekannt dl { grid-template-columns: 1fr; gap: 0; }
  .bekannt dd { margin-bottom: .5rem; }
}

/* Zweistufige Bestellung: was die Bestellung nicht bedeutet, Schritt 2, Zahlung */
.beruhigung { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.beruhigung li { position: relative; padding-left: 1.8rem; color: var(--ink-2); }
.beruhigung li::before { content: ""; position: absolute; left: .1rem; top: .72rem; width: 1rem; height: 3px; background: var(--glas); transform: rotate(-43deg); }
.beruhigung b { color: var(--ink); font-weight: 600; }
.einrichten__titel { font: 600 clamp(2rem, 4.4vw, 3.2rem)/1.08 var(--titel); overflow-wrap: anywhere; }
.einrichten__titel em { display: block; font-size: .62em; margin-top: .25em; }
.einrichten__ok { padding: .9rem 1.1rem; border-left: 4px solid var(--glas); background: var(--glas-blass); }
.zahlung { max-width: 46rem; margin-bottom: 2.4rem; padding-top: 1.4rem; border-top: 4px solid var(--ink); display: grid; gap: 1rem; }
.zahlung__titel { font: 600 1.35rem/1.2 var(--titel); }
.danke__weiter { margin: 1.6rem 0 .6rem; }
.danke__weiter .knopf { text-decoration: none; }