/* ===========================================================================
   Schriften der neuen Website ferien-auf-mallorca.com
   Zur Verwendung im OBS, damit beide Systeme gleich aussehen.

   Die Schriftdateien liegen im Ordner "fonts" NEBEN dieser Datei.
   Liegen sie woanders, die vier url(...) unten anpassen.

   Es wird nichts von Google nachgeladen - die Dateien liegen auf dem
   eigenen Server (DSGVO).
   =========================================================================== */

/* --- Cormorant Garamond: Ueberschriften ---------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/cormorant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/cormorant-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Inter: Fliesstext, Formulare, Tabellen ------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   Verwendung
   =========================================================================== */

:root {
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Fliesstext der Seite selbst - hier ist die groessere 15px/1.6-Set-up
   unproblematisch, da der normale Seitentext keine festen Pixel-Kaestchen
   hat. */
body {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Formularelemente/Tabellen: NUR die Schriftart wechseln, Groesse/Zeilen-
   hoehe bewusst NICHT anfassen. Das OBS-Buchungswidget hat an mehreren
   Stellen fest pixelgenau ausgemessene Eingabefelder (z.B. preisheader.php:
   das "Tage"-Feld ist nur 22px breit) - die waren auf Arial/12px
   zugeschnitten. Ein erzwungenes font-size:15px liess Inter dort ueberlaufen
   (gefunden 2026-09-16, Screenshot vom Nutzer). Ohne eigene Groessenangabe
   erbt das Element weiter die Groesse, die die jeweilige OBS-Seite per
   Inline-Style vorgibt - nur die Schriftart selbst wechselt. */
input,
select,
textarea,
button,
table {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Ueberschriften */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Kleine Auszeichnungen ueber Ueberschriften ("BELEGUNG & PREISE") */
.augenbraue {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Beschriftung von Knoepfen */
.knopf {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===========================================================================
   Farben der neuen Website (2026-09-16)
   Dunkelblau #0b3c4d - Meerblau #14607a - Lagune #3f97ab -
   Terrakotta #c0653c - Sand #faf6f0 - Sand dunkler #f0e8dc -
   Fliesstext #1f2d33 - Fliesstext gedaempft #5e727a

   Die Kalender-Statusfarben (frei/Anreise/belegt/vorgemerkt) sind in
   TbuchungsKalender.php als eigene CSS-Klassen definiert (.cal_content,
   .cal_today, .cal_optioniert, .cal_anreise, .cal_anreiseopt,
   .cal_markiert) - hier durch Tints der neuen Palette ersetzt, live am
   2026-09-16 im Browser geprueft. WICHTIG: der eigentliche Tagesfarbklecks
   ist ein VERSCHACHTELTES <span> MIT eigenem Inline-background-color
   (nicht die <td> selbst) - deshalb hier zusaetzlich mit !important und
   dem Nachfahren-Selektor "span" ueberschrieben, sonst bleibt die alte
   Inline-Farbe sichtbar.
   =========================================================================== */

/* Kalenderfarben - deutlich unterscheidbarer gemacht (2026-09-16,
   Nutzerfeedback "bitte etwas unterscheidbarer machen"): vier klar
   getrennte Farbfamilien statt 6 sehr aehnlicher heller Toene -
   gruen/mint = frei, blau = Anreise moeglich, warmes Orange = belegt/
   vorgemerkt, Gold = markiert. */
.cal_content, .cal_content span { background-color:#dcece8 !important; color:#1f2d33 !important; } /* frei */
.cal_anreise, .cal_anreise span { background-color:#a9c9d6 !important; color:#1f2d33 !important; } /* Anreise moeglich */
.cal_today, .cal_today span { background-color:#e3b7a0 !important; color:#1f2d33 !important; } /* belegt */
.cal_anreiseopt, .cal_anreiseopt span { background-color:#cfe0e8 !important; color:#1f2d33 !important; } /* Anreise (vorgemerkt) */
.cal_optioniert, .cal_optioniert span { background-color:#f0d4c2 !important; color:#1f2d33 !important; } /* vorgemerkt */
.cal_markiert, .cal_markiert span { background-color:#e8c977 !important; color:#1f2d33 !important; } /* markiert */

/* NUR die Wochentags-Kopfzeile (Sa/So/Mo...) bekommt den Sand-
   Hintergrund - .cal_days/.white_days/.leer_days bewusst OHNE erzwungene
   Hintergrundfarbe: diese Klasse wird im OBS auch fuer "leere"
   Struktur-Zellen (z.B. die Zeile um die AGB-Checkbox, die Buchungs-
   Button-Zelle) verwendet, die urspruenglich keinen eigenen Hintergrund
   hatten - ein erzwungenes background-color hat dort haessliche farbige
   Flaechen erzeugt (Nutzer hat das mit einem X markiert, 2026-09-16).
   Echte Ueberschriften-Boxen (z.B. "Belegung:", "Apartment X - Y SZ")
   haben ihre eigene Inline-Hintergrundfarbe und werden dadurch nicht
   beeinflusst. */
.cal_head {
  background-color: #faf6f0 !important;
  color: #0b3c4d !important;
}
a.cal_head { color: #0b3c4d !important; }
.white_days, .leer_days, .cal_days { color: #1f2d33; }

/* Die breite "Apartment X - Y SZ"-Kopfzeile (spannt die volle 615px-
   Breite, siehe eigene Klasse "titelleiste" in TbuchungsKalender.php)
   sah bei reinem Linksbuendig-Stellen immer noch nach viel Leerraum aus
   - jetzt richtige Titelleiste im Stil der Website (Dunkelblau,
   weisse Schrift), statt grauer Text auf hellem Grau. */
.titelleiste {
  background-color: #0b3c4d !important;
  color: #ffffff !important;
}

a:link, a:visited, a:active { color: #14607a; }
a:hover { color: #c0653c; }
/* gestrichelter Fokusrahmen (Browser-Standard beim Anklicken von Links,
   z.B. "Preisinfo"/"Hilfe") auf Nutzerwunsch entfernt (2026-09-16). */
a:focus, a:active { outline: none; }

/* Reiterleiste (Buchung.php: "An- und Abreisedatum" / "Zusatzleistungen" /
   "Persoenliche Daten") - Verlauf von Grau auf Sand-Toene umgestellt. */
.cdiv1 {
  background-color: #f0e8dc !important;
  background-image: none !important;
}
.cdiv1inv {
  background-color: #faf6f0 !important;
  background-image: none !important;
}

/* Vor-/Zurueck-Pfeile am unteren Rand (Buchung.php: vor.png/zurueck.png/
   vorinakt.png/zurueckinakt.png) - graue Kreisgrafiken durch schlichte
   Terrakotta-Pfeilzeichen ersetzt (Nutzerwunsch 2026-09-16: "nicht im
   Kreisdesign"). Die vier Bild-IDs sind in Buchung.php fest vergeben.
   WICHTIG: buchtabs.js setzt per JS "overflow:hidden" auf diese vier
   Container-Divs, aber NIE eine eigene Breite/Hoehe - die kam bisher
   allein vom <img> selbst. Mit display:none auf dem Bild schrumpfte der
   Container auf ~0 und hat den Pfeil dadurch grossteils abgeschnitten
   (Nutzerfeedback: "deutlich zu klein/kann man kaum sehen") - deshalb
   hier explizite feste Groesse ergaenzt. */
#vorid, #zurueckid, #vorinaktid, #zurueckinaktid {
  width: 32px !important;
  height: 32px !important;
  overflow: visible !important;
}
#vorid img, #zurueckid img, #vorinaktid img, #zurueckinaktid img {
  display: none;
}
#vorid a, #zurueckid a {
  text-decoration: none;
  display: block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
}
#vorid a::after {
  content: "\2192";
  color: #c0653c;
  font-size: 32px;
  font-weight: bold;
}
#zurueckid a::after {
  content: "\2190";
  color: #c0653c;
  font-size: 32px;
  font-weight: bold;
}
#vorinaktid::after {
  content: "\2192";
  color: #cccccc;
  font-size: 32px;
  font-weight: bold;
  line-height: 32px;
}
#zurueckinaktid::after {
  content: "\2190";
  color: #cccccc;
  font-size: 32px;
  font-weight: bold;
  line-height: 32px;
}

/* Buttons/Absende-Schaltflaechen (z.B. "Neue Wahl", "Unverbindliche
   Buchungsanfrage") - im Stil des "Verfuegbarkeit"-Buttons der
   Hauptwebseite (.knopf-voll aus website-neu/src/styles/global.css). */
input[type="button"], input[type="submit"], button {
  background-color: #c0653c !important;
  background-image: none !important; /* der Browser-Standard fuer
    <input type=submit> haengt sonst einen leichten Grauverlauf an, der
    wie ein "merkwuerdiger Verlauf" wirkt (Nutzerfeedback 2026-09-16) -
    das echte Website-Button-Vorbild ist komplett flach eingefaerbt */
  color: #ffffff !important;
  border: 1px solid #c0653c !important;
  border-radius: 4px !important;
  padding: 0.7em 1.6em !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  box-sizing: border-box !important; /* verhindert, dass winzige, unsichtbare
    Helfer-Buttons (z.B. width:5px versteckte Submit-Trigger) durch das
    Padding aufgeblaeht werden und dadurch das Layout verschieben */
  -webkit-appearance: none; /* entfernt native Browser-Button-Optik
    (Verlauf/3D-Rand), damit nur unser flaches Terrakotta uebrig bleibt */
  appearance: none;
}
/* Diese winzigen, unsichtbaren Helfer-Buttons sollen unveraendert
   unsichtbar/formlos bleiben. */
input[type="submit"][style*="visibility:hidden"],
input[type="submit"][style*="visibility: hidden"] {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}
input[type="button"]:hover, input[type="submit"]:hover, button:hover {
  background-color: #a2522f !important;
  border-color: #a2522f !important;
}