/*
 * domainverkauf.css — die Ergänzung für die Domain-Verkaufsseiten
 *
 * Eine Datei für alle. Jede Verkaufsseite liegt in ihrer eigenen
 * Subdomain, lädt aber von 4diget.de. Sonst läge dieselbe Datei dreissig
 * Mal herum, und eine Verbesserung wäre dreissig Änderungen.
 *
 * WAS SICH AM 05.10.2026 GEÄNDERT HAT
 *
 * Bis dahin war das hier eine VOLLSTÄNDIGE Stilvorlage: eigene Farben,
 * eigene Schrift, eigener Knopf in Grün. Die Seiten luden nur sie und
 * sahen deshalb aus wie von einer anderen Firma. „Passt nicht zum
 * Corporate Design" war genau richtig.
 *
 * Jetzt laden die Seiten style.css und theme-4diget.css wie jede andere
 * Seite im Haus, und hier steht nur noch, was es dort nicht gibt. Die
 * Reihenfolge ist wichtig: Diese Datei kommt zuletzt und ergänzt, statt
 * zu überschreiben.
 *
 * Erzeugt werden die Seiten von _tools/Domains/verkaufsseiten.py aus
 * _daten/vorlage/domainverkauf.
 *
 * --------------------------
 * Autor:   Martin Kornmüller
 * Projekt: 4digEt Domainverkauf
 * Stand:   05.10.2026
 */

/* ---- Die Kopfzeile über dem Namen ---------------------------------- */

.marke {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.marke a {
    color: var(--color-on-primary);
    text-decoration: none;
}

/* ---- Der Name selbst ----------------------------------------------- */

/*
 * Eine Domain ist der Titel der Seite und darf gross sein. Sie bricht
 * notfalls um: "neustartonline.de" passt auf einem Telefon sonst nicht
 * in eine Zeile.
 */
main h1 {
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.15;
    word-break: break-word;
}

.unterzeile {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--color-heading);
}

/* ---- Der Preis ----------------------------------------------------- */

.preis {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 0.0625rem solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    font-size: 1.5rem;
}

.preis strong {
    color: var(--color-accent-dark);
}

/* ---- Die Schnellbewertung ------------------------------------------ */

figure {
    margin: 1.5rem 0;
}

figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0.0625rem solid var(--color-border-strong);
    border-radius: var(--radius);
}

figcaption {
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* ---- Der QR-Code ---------------------------------------------------

   Stand hier bis zum 07.10.2026 mit display:inline-block und der
   Begruendung, dass die Punkte nicht kleiner gerechnet werden duerfen.
   Die Begruendung stimmt, die Umsetzung zentrierte aber nur, wenn das
   Elternteil text-align:center trug.

   Die Regel steht jetzt in oberflaeche.css und gilt damit auf jeder
   Domain, nicht nur auf den Verkaufsseiten. Zwei Fassungen derselben
   Regel waeren eine zu viel.
   ------------------------------------------------------------------ */

/* ---- Verweise und Ueberschriften im Inhalt ------------------------- */

/*
 * Diese Seiten schreiben schlichte <a> ohne Klasse. style.css faerbt
 * nur .main-link und .main-link-nu, also nahm der Browser sein eigenes
 * Blau: #0000EE, das zu nichts auf der Seite passt.
 *
 * Gleiche Farbe wie die Verweise auf 4diget.de, mit Unterstrich: Ein
 * Verweis soll auch ohne Farbe erkennbar sein.
 */
main a {
    color: var(--color-primary, #1C3959);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

main a:hover,
main a:focus-visible {
    color: var(--color-accent-dark, #D35400);
}

/*
 * Ueberschriften trugen die Farbe des Fliesstextes. Auf 4diget.de sind
 * sie dunkelblau, und diese Seiten sollen aussehen wie das Haus.
 */
main h1,
main h2,
main h3,
main h4 {
    color: var(--color-heading, #1C3959);
}