/* Intertours-Designsystem 1.0.0 – Brücke für den Travel Program Check-in.
   Lädt nach shell.css. Werte: /intertours-design/1.3.1/css/tokens.css.
   Zwei Ebenen:
   1. Basis (alle Marken): Schrift, Radien, Logo-Größen, Überschriften, neutrale Flächen.
   2. Intertours-Marke (data-brand-kind="intertours" oder ohne Projektmarke, z. B. Anmeldung):
      Primärbutton Türkis mit Inter-Blau-Text, Markenflächen.
   Kundenmarken (Altour, eigene) behalten ihre Tokens aus brand.json – keine Entfernung von Kundenfarben/-logos. */

/* ---------- 1. Basis ---------- */
:root {
  --f: var(--it-font);
  --r: var(--it-radius);
  --bg: var(--it-white);
  --line: var(--it-grey);
  --mu: var(--it-neutral-dark);
  --grey: var(--it-neutral-dark);
  --side: var(--it-blue);
  --side-tx: var(--it-grey);
  --side-mu: rgba(247, 246, 242, 0.7);
}
body { font-weight: var(--it-weight-light); }

/* Logo: sichtbare Höhe aus dem Designpaket. PNG-Dateien sind randlos zugeschnitten (Ink-Box 0),
   daher entspricht die CSS-Höhe der sichtbaren Höhe. PNG bleibt, weil die DOCX-Exporte sie einbetten. */
.login-top .logo { height: var(--it-logo-site); }
.side .side-head .brand .logo, .side .side-head .brand img { height: var(--it-logo-app); }
.rtop .logo { height: var(--it-logo-app); }
.logo-plate .logo { height: calc(var(--it-logo-app) * 0.8); }
@media (max-width: 767px) { .login-top .logo { height: var(--it-logo-app); } }

/* Überschriften: Thin für Seitentitel, Medium statt Bold für UI-Titel */
.vh h1, .login-pitch h2, .login-panel h1 { font-weight: var(--it-weight-thin); }
.vh h1 { font-size: 2.25rem; line-height: 1.2; }
.login-panel { background: var(--it-white); }
.login-panel h1 { font-size: 2rem; }
h2.h2, .login-product { font-weight: var(--it-weight-medium); }
.login-kicker { font-weight: var(--it-weight-medium); text-transform: none; letter-spacing: 0; }
.login-badge, .side .envb { font-weight: var(--it-weight-medium); border-radius: var(--it-radius); }
@media (max-width: 767px) { .vh h1 { font-size: 1.75rem; } }

/* Formularfelder eckig wie .form_input */
.fld input, .fld select, .fld textarea { border-radius: var(--it-radius-none); }
.card, .modal, table.t, .tablewrap, .toast { border-radius: var(--it-radius); }
.note { border-radius: var(--it-radius-none); border-left: 3px solid var(--grey); }

/* ---------- 2. Intertours-Marke ---------- */
:root:not([data-brand-kind]) .btn:not(.ghost):not(.text):not(.danger):not(.dark),
:root[data-brand-kind="intertours"] .btn:not(.ghost):not(.text):not(.danger):not(.dark) {
  background: var(--it-turquoise); border-color: var(--it-turquoise); color: var(--it-blue);
}
:root:not([data-brand-kind]) .btn:not(.ghost):not(.text):not(.danger):not(.dark):hover,
:root[data-brand-kind="intertours"] .btn:not(.ghost):not(.text):not(.danger):not(.dark):hover {
  background: var(--it-turquoise-hover); border-color: var(--it-turquoise-hover); color: var(--it-blue);
}
:root:not([data-brand-kind]) .btn.ghost, :root[data-brand-kind="intertours"] .btn.ghost { border-color: var(--it-blue); background: transparent; }
:root:not([data-brand-kind]) .btn.dark, :root[data-brand-kind="intertours"] .btn.dark { background: rgba(247, 246, 242, 0.2); border-color: rgba(247, 246, 242, 0.2); color: var(--it-white); }
:root:not([data-brand-kind]) .note.ok, :root[data-brand-kind="intertours"] .note.ok { border-left-color: var(--it-turquoise); }
:root:not([data-brand-kind]) .note.warn, :root[data-brand-kind="intertours"] .note.warn { border-left-color: var(--it-amber); }
:root:not([data-brand-kind]) .note.err, :root[data-brand-kind="intertours"] .note.err { border-left-color: var(--it-red); }

/* ---------- 1.1.0: Seitenabstand wie intertours.de ---------- */
/* Anmeldung: linke Spalte beginnt am Fensterrand → --it-inset-vw */
.login-hero { padding-left: var(--it-inset-vw); }
/* Antwortende: Kopf, Inhalt und Aktionsleiste bündig auf --it-inset; Lesebreite des Formulars bleibt 860 px */
.rtop .in, .rmain, .rfoot .in { max-width: none; margin-inline: 0; padding-inline: var(--it-inset); }
.rmain > * { max-width: 53.75rem; }
/* Vertikal: Logo-Oberkante 24 px (Anmeldung) bzw. 16 px (Seitenleiste) */
.login-hero { padding-top: var(--it-header-pad); }
.side { padding-top: var(--it-space-4); }
.rtop .in { padding-block: var(--it-space-4); }
.rtop .in > .logo, .rtop .in > a > .logo, .rtop .in > .logo-plate { align-self: flex-start; }

/* ---------- 1.2.0: Werkzeug-Kennung (Logo + Tag) ---------- */
.login-top .it-brand .login-product { margin: 0; font-size: var(--it-text-body); font-weight: var(--it-weight-medium); letter-spacing: 0; color: var(--it-turquoise); }
@media (max-width: 767px) { .login-top .it-brand .login-product { font-size: var(--it-text-small); } }
/* Seitenleiste (300 px): Kennung unter dem Logo */
.side .prod > span.it-brand__tag:first-child { font-size: var(--it-text-small); font-weight: var(--it-weight-medium); letter-spacing: 0; color: var(--it-turquoise); padding: 0.125rem 0.75rem; white-space: normal; }
.rtop .in > .it-brand { flex: none; align-self: flex-start; }