/*
    gemelo Kiosk - oeffentliche Seite.

    Design uebernommen von www.gemelo.de (Bootstrap 5, oranger Fixed-Top-Nav,
    Bordeaux-Ueberschriften, weisse Logo-Leiste unten, House-Schriften). Die Werte
    unten sind 1:1 die des Hauptauftritts - wer dort etwas aendert, sollte hier
    nachziehen. Farbwerte deshalb NUR ueber die Variablen unten verwenden.
*/

:root {
    --gemelo-orange: #f77b32;      /* rgba(247,123,50,1) - Navigation, Links, Primaerknopf */
    --gemelo-orange-dark: #e0641b; /* nur fuer Hover auf Flaechen                          */
    --gemelo-red: #b51f2a;         /* rgba(181,31,42,1)  - Ueberschriften, Link-Hover      */
    --gemelo-ink: #434f4f;         /* rgb(67,79,79)      - Fliesstext                      */
    --gemelo-ink-soft: #6d7a7a;
    --gemelo-line: #e3e7e7;
    --gemelo-tint: #faf7f4;        /* sehr helles Warmgrau fuer abgesetzte Baender         */

    --nav-h: 62px;
    --footer-h: 116px;

    --font-head: HouseBold, "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
    --font-body: HouseRegular, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* ---------------------------------------------------------------- Grundlagen */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    font-family: var(--font-body);
    color: var(--gemelo-ink);
    background-color: #fff;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3 { font-family: var(--font-head); color: var(--gemelo-red); }

h1 { font-size: 32px; line-height: 1.2; margin-bottom: 24px; }
h2 { font-size: 26px; line-height: 1.25; margin-bottom: 16px; }
h3 { font-size: 20px; line-height: 1.3; margin-bottom: 10px; }

main a { color: var(--gemelo-orange); text-decoration: none; }
main a:hover, main a:focus { color: var(--gemelo-red); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--gemelo-red); outline-offset: 2px; }

.text-muted-gemelo { color: var(--gemelo-ink-soft) !important; }
.lead-gemelo { font-size: 19px; line-height: 1.65; color: var(--gemelo-ink); }

/* Sprungmarke fuer Tastatur/Screenreader - sichtbar erst beim Fokus. */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 3000;
    background: #fff; color: var(--gemelo-red); padding: 12px 20px; font-family: var(--font-head);
}
.skip-link:focus { left: 8px; top: 8px; }

/* -------------------------------------------------------------- Navigation */

.kiosk-nav {
    z-index: 2000;
    background-color: rgba(247, 123, 50, .95);
    min-height: var(--nav-h);
    box-shadow: 0 1px 6px rgba(0,0,0,.12);
}

.kiosk-nav .navbar-brand {
    font-family: var(--font-head);
    font-size: 22px;
    color: #fff;
    letter-spacing: .3px;
}
.kiosk-nav .navbar-brand span { font-weight: normal; opacity: .85; }

.kiosk-nav .nav-link {
    font-family: var(--font-head);
    font-size: 20px;
    color: #fff !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-bottom: 3px solid transparent;
}
.kiosk-nav .nav-link:hover { border-bottom-color: rgba(255,255,255,.75); }
.kiosk-nav .nav-link.active { border-bottom-color: #fff; }

.kiosk-nav .navbar-toggler { border-color: rgba(255,255,255,.6); }

/* Sprachumschalter. Kleiner als die Menuepunkte und mit Rahmen statt Unterstrich: er
   fuehrt nicht auf eine weitere Seite des Menues, sondern auf DIESELBE Seite in der
   anderen Sprache - das soll man sehen, bevor man klickt. */
.kiosk-nav .kiosk-lang {
    font-size: 16px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 2px;
    padding: 3px 10px !important;
    white-space: nowrap;
}
.kiosk-nav .kiosk-lang:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* Der Testkonto-Knopf steht in JEDER Ansicht in der Navigation - er ist das Ziel
   der ganzen Seite und darf nie mehr als einen Klick entfernt sein. */
.kiosk-nav .btn-trial {
    font-family: var(--font-head);
    font-size: 17px;
    background: #fff;
    color: var(--gemelo-red) !important;
    border-radius: 2px;
    padding: 7px 18px;
    white-space: nowrap;
}
.kiosk-nav .btn-trial:hover { background: var(--gemelo-red); color: #fff !important; }

/* ------------------------------------------------------------------- Knoepfe */

.btn-gemelo, .btn-gemelo-outline, .btn-gemelo-white {
    font-family: var(--font-head);
    font-size: 18px;
    border-radius: 2px;
    padding: 12px 28px;
    text-decoration: none !important;
    display: inline-block;
    border: 2px solid transparent;
    transition: background-color .15s ease, color .15s ease;
}

.btn-gemelo { background: var(--gemelo-orange); color: #fff !important; }
.btn-gemelo:hover { background: var(--gemelo-red); color: #fff !important; }

.btn-gemelo-outline { border-color: var(--gemelo-orange); color: var(--gemelo-orange) !important; background: transparent; }
.btn-gemelo-outline:hover { background: var(--gemelo-orange); color: #fff !important; }

.btn-gemelo-white { background: #fff; color: var(--gemelo-red) !important; }
.btn-gemelo-white:hover { background: var(--gemelo-red); color: #fff !important; }

/* ---------------------------------------------------------------------- Hero */

/*  Zwei Hintergruende: das Foto UND ein Verlauf. Fehlt /images/hero.jpg (oder ist
    noch keins ausgewaehlt), bleibt der Verlauf stehen - die Seite sieht dann immer
    noch fertig aus statt kaputt. Ein echtes Ausstellungsfoto einfach dorthin legen. */
.kiosk-hero {
    margin-top: var(--nav-h);
    min-height: min(calc(100vh - var(--nav-h) - var(--footer-h)), 640px);
    display: flex;
    align-items: flex-end;
    background-image: url('/images/hero.jpg'),
                      linear-gradient(135deg, #2f3838 0%, #434f4f 45%, #7a4a30 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Die weissen, halbtransparenten Textkaesten sind das Erkennungszeichen von gemelo.de. */
.kiosk-hero-box { padding: 0 0 48px 0; }

.kiosk-hero-box h1,
.kiosk-hero-box p {
    display: inline-block;
    margin: 8px 0;
    text-align: left;
    background-color: rgba(255, 255, 255, .92);
    box-shadow: 0 0 1px rgba(0,0,0,.1);
}
.kiosk-hero-box h1 { padding: 12px 24px; font-size: 34px; color: var(--gemelo-red); }
.kiosk-hero-box p  { padding: 8px 24px; font-size: 17px; line-height: 28px; max-width: 640px; }
.kiosk-hero-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ Sektionen */

.kiosk-section { padding: 72px 0; }
.kiosk-section--tint { background: var(--gemelo-tint); }
.kiosk-section--line { border-top: 1px solid var(--gemelo-line); }

.kiosk-eyebrow {
    font-family: var(--font-head);
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gemelo-orange);
    margin-bottom: 10px;
}

/* ------------------------------------------------------------ Karten / Raster */

.kiosk-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--gemelo-line);
    border-radius: 3px;
    padding: 28px 26px;
}
.kiosk-card h3 { margin-bottom: 8px; }
.kiosk-card p:last-child { margin-bottom: 0; }

.kiosk-card-icon {
    width: 44px; height: 44px; margin-bottom: 16px;
    color: var(--gemelo-orange);
}
.kiosk-card-icon svg { width: 100%; height: 100%; }

/* Nummerierte Schritte ("In drei Schritten live") */
.kiosk-step { position: relative; padding-left: 64px; }
.kiosk-step-no {
    position: absolute; left: 0; top: 0;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--gemelo-orange); color: #fff;
    font-family: var(--font-head); font-size: 21px;
    display: flex; align-items: center; justify-content: center;
}

/* Merkmalslisten mit Haken statt Aufzaehlungspunkten */
ul.kiosk-list { list-style: none; padding-left: 0; margin: 0; }
ul.kiosk-list li { position: relative; padding-left: 30px; margin-bottom: 10px; }
ul.kiosk-list li::before {
    content: ""; position: absolute; left: 0; top: .45em;
    width: 16px; height: 9px;
    border-left: 3px solid var(--gemelo-orange);
    border-bottom: 3px solid var(--gemelo-orange);
    transform: rotate(-45deg);
}

/* ------------------------------------------------------------------- Preise */

.kiosk-price { position: relative; }

.kiosk-price-tag {
    font-family: var(--font-head);
    font-size: 38px;
    line-height: 1.1;
    color: var(--gemelo-red);
    margin: 6px 0 0 0;
}
.kiosk-price-unit {
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--gemelo-ink-soft);
    margin-bottom: 16px;
}

/* Rabattmarke oben rechts auf der Staffelkarte. */
.kiosk-badge {
    position: absolute;
    top: 18px; right: 18px;
    background: var(--gemelo-orange);
    color: #fff;
    font-family: var(--font-head);
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 2px;
}

/* Eingabefeld des Rechners in der Formensprache der Knoepfe (Bootstrap setzt sonst
   abgerundete Ecken und ein blaues Fokus-Leuchten, das hier fremd wirkt). */
#anzahl {
    border-radius: 2px;
    border: 2px solid var(--gemelo-line);
    font-family: var(--font-head);
    font-size: 20px;
    padding: 8px 12px;
}
#anzahl:focus {
    border-color: var(--gemelo-orange);
    box-shadow: none;
}

/* ----------------------------------------------------------- Testkonto-Band */

.kiosk-cta {
    background: linear-gradient(135deg, var(--gemelo-orange) 0%, var(--gemelo-red) 100%);
    color: #fff;
    padding: 64px 0;
}
.kiosk-cta h2, .kiosk-cta h1 { color: #fff; }
.kiosk-cta p { color: rgba(255,255,255,.94); }
.kiosk-cta a:not(.btn-gemelo-white) { color: #fff; text-decoration: underline; }

/* Die drei Klicks bis zum Testkonto - als Kette dargestellt. */
.kiosk-clicks { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.kiosk-click {
    flex: 1 1 200px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 3px;
    padding: 16px 18px;
}
.kiosk-click b { font-family: var(--font-head); display: block; margin-bottom: 4px; }

/* ------------------------------------------------------- Geraete-Abbildungen */

.kiosk-frame {
    border: 10px solid #2f3838;
    border-radius: 14px;
    background: #2f3838;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    overflow: hidden;
    max-width: 100%;
}
.kiosk-frame img, .kiosk-frame svg { display: block; width: 100%; height: auto; }

.kiosk-shot {
    border: 1px solid var(--gemelo-line);
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    max-width: 100%; height: auto;
}

/* ------------------------------------------------------------------- Footer */

.kiosk-linkbar { background: var(--gemelo-tint); border-top: 1px solid var(--gemelo-line); padding: 48px 0 40px; }
.kiosk-linkbar h4 { font-family: var(--font-head); font-size: 17px; color: var(--gemelo-red); margin-bottom: 12px; }
.kiosk-linkbar ul { list-style: none; padding-left: 0; }
.kiosk-linkbar li { margin-bottom: 7px; }
.kiosk-linkbar a { color: var(--gemelo-orange); text-decoration: none; }
.kiosk-linkbar a:hover { color: var(--gemelo-red); text-decoration: underline; }

/*  Weisse Logo-Leiste unten - wie auf gemelo.de fest am Bildschirmrand. Auf kleinen
    Geraeten NICHT fest: dort ist die Seite laenger als der Hauptauftritt und 87px
    dauerhaft belegter Bildschirm waeren zu teuer. */
.kiosk-footer { height: var(--footer-h); background: #fff; border-top: 1px solid var(--gemelo-line); }

.kiosk-logo {
    display: block;
    width: 266px; height: 84px;
    margin: 16px 32px;
    background-image: url('/images/logo-gemelo.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
}
/* Ersatz, solange das Logo noch nicht auf dem Server liegt. */
.kiosk-logo-text { font-family: var(--font-head); font-size: 30px; color: var(--gemelo-ink); line-height: 84px; margin: 16px 32px; }

@media (min-width: 992px) {
    .kiosk-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500; }
    main { margin-bottom: var(--footer-h); }
}

/* ------------------------------------------------------------------- Klein */

@media (max-width: 991px) {
    :root { --footer-h: 87px; }

    h1 { font-size: 26px; }
    h2 { font-size: 22px; }

    .kiosk-hero { min-height: 460px; }
    .kiosk-hero-box h1 { font-size: 24px; padding: 10px 16px; }
    .kiosk-hero-box p { font-size: 15px; line-height: 24px; padding: 6px 16px; }

    .kiosk-section { padding: 48px 0; }
    .kiosk-nav .nav-link { font-size: 18px; border-bottom: none; }
    .kiosk-nav .btn-trial { margin-top: 8px; display: inline-block; }

    .kiosk-logo { width: 200px; height: 63px; margin: 12px 24px; }
    .kiosk-logo-text { font-size: 24px; line-height: 63px; margin: 12px 24px; }
}

/* ------------------------------------------------------------------ Drucken */

@media print {
    .kiosk-nav, .kiosk-footer, .kiosk-cta .btn-gemelo-white { display: none !important; }
    main { margin: 0 !important; }
    body { font-size: 12pt; }
}