/* ==========================================================================
   Bornd Fono — originalgetreuer Nachbau
   Alle Werte am 13.08.2026 direkt aus bornd-fono.de ausgelesen.
   Basiseinheit ist rem; die Wurzelgröße wechselt in denselben Stufen wie im
   Original (19pt / 14pt / 12pt), dadurch skaliert das gesamte Layout mit.
   ========================================================================== */

/* Die Seite laedt keine Schriften nach — Verdana liegt auf jedem Rechner. */

/* --- Tokens, 1:1 aus dem Original --------------------------------------- */
:root{
  /* --- Gemeinsamer Wertesatz -----------------------------------------------
     Dieselben Werte stehen in der style.css von cratesync.bornd-fono.de.
     Wird hier etwas geaendert, gehoert es auch dorthin.

     Ein Orange in drei Rollen statt drei Toenen ohne Zustaendigkeit. Alle
     drei haben denselben Farbwinkel (23 Grad) und leiten sich vom Ton des
     CrateSync-Symbols ab. Der ist der einzige, der ausserhalb dieser Dateien
     festgelegt ist — er steckt im App-Symbol, das auf fremden Rechnern im
     Dock liegt und sich nicht nachtraeglich aendern laesst.

     Die Zahlen dahinter sind Kontrastverhaeltnisse. 4,5 ist die Schwelle,
     ab der normale Schrift als lesbar gilt, 7 die strengere Stufe.         */
  --orange:#e8600a;          /* Akzent: Kanten, Symbole, Auszeichnungen
                                5,65 auf --bg                              */
  --orange-fill:#c04a00;     /* Flaechen, die weisse Schrift tragen
                                4,98 mit Weiss — der alte Buttonton
                                #d44d13 kam nur auf 4,31                    */
  --orange-ink:#f7843b;      /* Verweise und Kleintext auf dunklem Grund —
                                Rechtstexte, Formularhinweise, Fokusrahmen.
                                7,70 auf --bg                              */

  --bg:#0d0d0d;              /* neutral statt mit Violettstich             */
  --text:#f0efed;            /* warmes Gebrochenweiss statt reinem Weiss.
                                16,9 auf --bg — reines Weiss flimmert auf
                                dunklem Grund staerker, ohne besser
                                lesbar zu sein                             */
  --panel:#e7e9ec;           /* helle Logokarte */

  /* Eine Schrift statt drei. Verdana liegt auf jedem Rechner, also faellt
     das Nachladen von Inter, Sora und Archivo weg — 99 KB und fuenf
     Anfragen weniger, und kein Flackern beim Schriftwechsel. Dieselbe
     Schrift traegt die CrateSync-Seite und deren Wortmarke.              */
  --font:Verdana,Geneva,Tahoma,sans-serif;

  --card-bg:rgba(255,255,255,.03);
  --card-border:rgba(255,255,255,.04);
  --field-border:rgba(255,255,255,.73);
  --icon-bg:rgba(255,255,255,.07);
  --rule:rgba(255,255,255,.16);

  --width:29rem;             /* Breite der Karteninnenfläche */
  --pad:1.25rem;             /* Innenabstand der Karte */
  --spacing:.75rem;          /* Standardabstand zwischen Komponenten */
  --radius:1.25rem;          /* Kartenradius */
  --radius-s:.625rem;        /* Buttons, Felder, Icon-Kacheln */
}

/* Die Stufen des Originals: 19pt Grundgröße, darunter 14pt und 12pt. */
html{font-size:19pt}
@media (max-width:1680px){html{font-size:14pt}}
@media (max-width:980px){html{font-size:12pt}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0;
  background-color:var(--bg);
  min-width:320px;min-height:100vh;
  overflow-x:hidden;overflow-wrap:break-word;
  font-family:var(--font);
  line-height:1;
  /* Kein font-smoothing setzen. Das Original setzt es nirgends, und
     -moz-osx-font-smoothing:grayscale liess die dünnen Schnitte auf macOS
     grauer statt weiss wirken (in Firefox besonders deutlich). */
}

/* --- Facettierter Hintergrund ------------------------------------------
   Im Original ein eingebettetes SVG auf body::before. Hier als eigene Datei,
   sonst identisch: fixiert, 100vw breit, cover, mittig, ohne Wiederholung.  */
body::before{
  content:"";display:block;position:fixed;top:0;left:0;
  width:100vw;height:100vh;
  z-index:0;pointer-events:none;
  background-image:url('../img/bg-facets.svg');
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
}

.site-wrapper{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:1rem;overflow:hidden;
}

/* --- Die Karte ----------------------------------------------------------
   Die Karte weichzeichnet den Hintergrund hinter sich: backdrop-filter mit
   0.4rem (im Original 7,46667 px bei 18,6667 px Grundgröße). Dadurch wirken
   die Facetten innerhalb der Karte weich und außerhalb scharf.
   position/z-index sind nötig, damit die Karte über der Hintergrundebene
   liegt und diese überhaupt abtasten kann.                                  */
.site-main{
  position:relative;z-index:1;
  background-color:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  width:100%;max-width:calc(var(--width) + 2px);
  -webkit-backdrop-filter:blur(.4rem);
          backdrop-filter:blur(.4rem);
}
.site-main > .inner{
  width:100%;
  padding:var(--pad);
  border-radius:calc(var(--radius) - 1px);
}

/* Reset für die Inhaltselemente.
   Achtung auf die Spezifität: die Abstandsregeln weiter unten sind alle mit
   zwei Klassen geschrieben, damit sie diesen Reset sicher überschreiben. */
.inner h1,.inner h2,.inner p,.inner ul,.inner hr,.inner form{margin:0;padding:0}
.inner ul{list-style:none}

/* Standardabstand zwischen allen Komponenten */
.inner .component{margin:var(--spacing) 0}
.inner .component:first-child{margin-top:0}
.inner .component:last-child{margin-bottom:0}

/* --- Trennlinie --------------------------------------------------------- */
.inner hr.divider{
  border:0;height:1rem;margin:1rem 0;
  display:flex;align-items:center;
}
.inner hr.divider::before{
  content:"";display:block;width:100%;height:2px;background-color:var(--rule);
}

/* --- Porträt ------------------------------------------------------------ */
.inner .portrait{text-align:center;margin-bottom:1.75rem;line-height:0}
.portrait img{
  display:inline-block;width:15.75rem;height:15.75rem;
  object-fit:cover;border-radius:50%;
}

/* --- Icon-Reihe --------------------------------------------------------- */
.inner .icons{
  display:flex;justify-content:center;gap:1.75rem;
  margin:1.25rem 0;
}
.icons a{
  display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;
  border-radius:var(--radius-s);
  background-color:var(--icon-bg);
  color:var(--text);text-decoration:none;
  transition:background-color .2s ease;
}
.icons a:hover{background-color:rgba(255,255,255,.14)}
.icons svg{width:1.821rem;height:1.821rem;fill:currentColor}

/* --- Tagline ------------------------------------------------------------
   Zur Breite siehe den Abschnitt "Ausgleich der Laufweite" weiter unten.     */
.tagline{
  font-family:var(--font);font-weight:400;
  font-size:.875rem;letter-spacing:.225rem;line-height:1.531rem;
  color:var(--orange);text-transform:uppercase;text-align:center;
}

/* --- Überschrift -------------------------------------------------------- */
/* Der Namenszug traegt dieselbe Zeichnung wie die Wortmarke auf der
   CrateSync-Seite: erster Teil hell, zweiter orange. Der frueher hier
   liegende orange Schatten ist entfallen — er hatte die Aufgabe, dem rein
   weissen Schriftzug etwas Farbe zu geben. Seit "FONO" selbst orange ist,
   macht er dieselbe Arbeit ein zweites Mal, und hinter dem orangen Wort
   weicht er dessen Kanten auf.

   "FONO" und die Tagline darueber tragen beide --orange. Sie gehoeren
   zusammen — Name und Zeile darunter sind ein Block, und zwei verschieden
   helle Orangetoene haben dort wie zwei Farben gewirkt statt wie eine
   Handschrift.                                                            */
h1.title{
  font-family:var(--font);font-weight:700;
  font-size:2.25rem;letter-spacing:.025rem;line-height:2.8125rem;
  color:var(--text);text-align:center;
}
h1.title span{color:var(--orange)}
/* Etwas mehr Luft zwischen Namenszug und Fliesstext als zwischen den
   uebrigen Bauteilen: 0,9375rem statt der 0,75rem aus --spacing, also
   25 Prozent mehr. Weil sich benachbarte Aussenabstaende zusammenlegen und
   der groessere gewinnt, genuegt diese eine Angabe — der Absatz darunter
   behaelt seine 0,75rem.                                                  */
.inner h1.title{margin-bottom:.9375rem}

/* --- Fließtext ----------------------------------------------------------
   Zwei Varianten wie im Original: der Bio-Absatz ist größer und leichter,
   der Kontakt-Absatz kleiner, etwas fetter und linksbündig. */
.body-text{
  font-family:var(--font);font-weight:200;
  font-size:1rem;letter-spacing:.025rem;line-height:1.25rem;
  color:var(--text);text-align:center;
}
.body-text--small{
  font-weight:300;font-size:.875rem;line-height:1.42188rem;text-align:left;
}
/* Zwei aufeinanderfolgende Absätze bekommen etwas mehr Luft als der
   Standardabstand zwischen Komponenten — sonst lesen sie sich wie einer. */
.inner .body-text + .body-text{margin-top:1.125rem}

/* --- Ausgleich der Laufweite --------------------------------------------
   Bei zentriertem Text hängt hinter dem letzten Zeichen jeder Zeile noch ein
   voller Buchstabenabstand. Der zählt zur Zeilenbreite mit und schiebt den
   sichtbaren Text um die halbe Laufweite nach links. Das Original gleicht das
   aus, indem es jeden Textblock exakt um seine Laufweite verbreitert.
   Bei der Tagline (0,225rem) sind das gut 2 px — deutlich sichtbar.          */
.inner .tagline{width:calc(100% + .225rem)}
/* Als Abschluss unter dem Text braucht die Zeile mehr Abstand nach oben
   als zwischen zwei normalen Komponenten. */
.inner .body-text + .tagline{margin-top:1.375rem}
/* Die Frage vor dem Knopf braucht mehr Luft nach unten als der
   Standardabstand — sonst klebt der Knopf an der Zeile.                    */
.inner .body-text + .buttons--cta{margin-top:1.25rem}
.inner h1.title,
.inner .body-text{width:calc(100% + .025rem)}

/* Unter 736 px nimmt das Original die Laufweite auf 7/8 zurück; die
   Ausgleichsbreite geht entsprechend mit. */
@media (max-width:736px){
  .tagline{letter-spacing:.196875rem}
  .inner .tagline{width:calc(100% + .196875rem)}
  h1.title,.body-text{letter-spacing:.021875rem}
  .inner h1.title,
  .inner .body-text{width:calc(100% + .021875rem)}
}

/* --- Link-Buttons ------------------------------------------------------- */
.buttons{display:flex;flex-direction:column;gap:.875rem}
.buttons a{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.78125rem 1.25rem;
  border-radius:var(--radius-s);
  background-color:var(--orange-fill);
  background-image:linear-gradient(300deg,#000 34%,rgba(232,96,10,.01) 83%);
  color:var(--text);text-decoration:none;
  font-family:var(--font);font-weight:500;
  font-size:1rem;letter-spacing:-.025rem;line-height:1.55rem;
  transition:filter .2s ease;
}
.buttons a:hover{filter:brightness(1.12)}
.buttons svg{width:1.55rem;height:1.55rem;fill:currentColor;flex-shrink:0}
/* Das CrateSync-Symbol ist eine gefuellte Flaeche, keine Strichzeichnung,
   und fuellt seinen Kasten ganz aus — die uebrigen Symbole lassen 10 bis
   22 % Rand. Ausgemessen: bei 78 % Kantenlaenge stimmen sowohl die
   sichtbare Zeichnung als auch die helle Flaeche mit den anderen ueberein. */
.buttons svg.icon-app{width:1.2125rem;height:1.2125rem}
/* Randausgleich: keine der Zeichnungen reicht bis an den rechten Rand ihres
   Kastens, aber jede unterschiedlich weit — Twitch am weitesten, CrateSync
   gar nicht (dort ist die Flaeche der Kasten). Ohne Ausgleich stuenden die
   weissen Kanten um bis zu 1,2 px auseinander. Twitch gibt die Kante vor,
   die uebrigen ruecken um die gemessene Differenz nach links.             */
.buttons svg.icon-ig{margin-right:.0084rem}
.buttons svg.icon-hearthis{margin-right:.0587rem}
/* Die Sprechblase wirkt als kompakte, fast randlose Flaeche ebenfalls
   groesser als die Strichzeichnungen — 5 % kleiner gleicht das aus.    */
.buttons svg.icon-mail{width:1.4725rem;height:1.4725rem;margin-right:.0579rem}
.buttons svg.icon-app{margin-right:.174rem}
.buttons .label{flex:1}

/* Handlungsaufforderung am Seitenende: ohne Symbol, Schrift mittig.
   Der Knopf ist um 5 % kleiner als die uebrigen — die Schrift bleibt
   unveraendert, die Verkleinerung geht allein zu Lasten des freien Platzes
   um sie herum. Ausgemessen: Knopf 18,882 x 3,112 rem, Zeile 16,383 rem
   breit bei 1,55 rem Zeilenhoehe. Fuer 95 % (17,938 x 2,957 rem) bleiben
   0,778 rem seitlich und 0,703 rem oben und unten.                         */
.buttons--cta{align-items:center}          /* Knopf nur so breit wie noetig */
.buttons--cta li{max-width:100%}
.buttons--cta a{
  justify-content:center;
  padding:.7033rem .7777rem;
}
.buttons--cta .label{flex:0 1 auto;text-align:center}
/* Auf schmalen Geraeten fehlt der Zeile sonst gut 1 px zur vollen Breite.
   Ausgemessen: ab 360 px Bildschirmbreite reicht ein seitlicher Innenabstand
   von 0,6875 rem, darunter bricht die Zeile um.                            */
@media (max-width:736px){
  .buttons--cta a{padding-left:.6875rem;padding-right:.6875rem}
}
/* Unterhalb von 360 px reicht der Platz auch dann nicht mehr, wenn der
   Innenabstand gegen null geht — dort hilft nur eine kleinere Schrift.
   Ausgemessen bis hinunter zu 320 px.                                       */
@media (max-width:359px){
  .buttons--cta a{font-size:.875rem;padding-left:.4375rem;padding-right:.4375rem}
}
/* "Zur App" ist kurz genug, dass der Platz auch auf schmalen Geraeten
   reicht — der Knopf behaelt deshalb ueberall denselben Innenabstand wie
   die Handlungsaufforderung auf der Startseite. Diese Regel muss hinter
   den beiden Abfragen oben stehen, sonst gewinnen dort deren Werte.       */
.buttons--app a{padding:.7033rem .7777rem;font-size:1rem}

/* --- Slideshow ---------------------------------------------------------- */
.slideshow{
  position:relative;width:100%;aspect-ratio:495/327;
  border-radius:1rem;overflow:hidden;
}
/* Echte <img>-Elemente statt CSS-Hintergruende. Nur so lassen sich
   Alternativtexte, verzoegertes Laden und die Bildersuche nutzen.           */
.slideshow > img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;animation:slideFade 30s infinite;
}
.slideshow > img:nth-child(1){animation-delay:0s}
.slideshow > img:nth-child(2){animation-delay:6s}
.slideshow > img:nth-child(3){animation-delay:12s}
.slideshow > img:nth-child(4){animation-delay:18s}
.slideshow > img:nth-child(5){animation-delay:24s}
@keyframes slideFade{
  0%{opacity:0} 3%{opacity:1} 20%{opacity:1} 23%{opacity:0} 100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .slideshow > img{animation:none}
  .slideshow > img:first-child{opacity:1}
}

/* --- Bedienung der Diashow ----------------------------------------------
   Punkte und Pfeile baut das Skript am Seitenende ein. Erst dann traegt der
   Rahmen die Klasse .diashow--js — ohne JavaScript laeuft oben weiter die
   reine CSS-Blende, und es stehen keine toten Knoepfe herum.                */
.diashow--js .slideshow > img{animation:none;transition:opacity .9s ease}
.diashow--js .slideshow > img.aktiv{opacity:1}

/* Pfeile links und rechts im Bild, halbtransparent und nur beim
   Darueberfahren sichtbar.                                                  */
.diashow__pfeil{
  position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;padding:0;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  background-color:rgba(23,18,23,.42);
  -webkit-backdrop-filter:blur(.2rem);
          backdrop-filter:blur(.2rem);
  color:var(--text);cursor:pointer;
  opacity:0;transition:opacity .2s ease,background-color .2s ease;
}
.diashow__pfeil--zurueck{left:.625rem}
.diashow__pfeil--vor{right:.625rem}
.diashow__pfeil svg{
  width:1.05rem;height:1.05rem;
  fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.slideshow:hover .diashow__pfeil{opacity:.72}
.diashow__pfeil:hover{opacity:1;background-color:rgba(23,18,23,.72)}
.diashow__pfeil:focus-visible{opacity:1;outline:2px solid var(--orange-ink);outline-offset:2px}
/* Auf Geraeten ohne Mauszeiger gibt es kein Darueberfahren — dort stehen
   die Pfeile dauerhaft. */
@media (hover:none){
  .diashow__pfeil{opacity:.72}
}

/* Punktreihe unter dem Bild. Der Knopf ist deutlich groesser als der
   sichtbare Punkt, damit er sich auch mit dem Finger treffen laesst.        */
.diashow__punkte{display:flex;justify-content:center;gap:.375rem;margin-top:.4375rem}
.diashow__punkt{
  display:flex;align-items:center;justify-content:center;
  width:1.25rem;height:1.25rem;padding:0;
  border:0;background:none;cursor:pointer;
}
/* Der Ring ist ein SVG-Kreis, kein CSS-Rahmen. Ein Rahmen auf einem Element
   mit border-radius wird aus vier Bogenstuecken zusammengesetzt, die sich
   genau auf 12, 3, 6 und 9 Uhr treffen; bei halbdurchsichtiger Farbe malen
   die Nahtstellen dort doppelt und erscheinen als helle Striche. Der
   SVG-Kreis ist eine einzige geschlossene Form ohne Nahtstellen, und die
   Farbe ist deckend statt halbdurchsichtig — damit kann auch doppeltes
   Malen nichts mehr aufhellen.                                             */
.diashow__punkt svg{display:block;width:12px;height:12px;overflow:visible}
.diashow__punkt circle{fill:none;stroke:#a7a5a7;stroke-width:2}
.diashow__punkt:hover circle{stroke:#fff}
/* Der gefuellte Punkt kommt ohne Kontur aus. Eine volle Flaeche wirkt bei
   gleichem Durchmesser groesser als ein Ring; ohne die 2 px Kontur stehen
   beide optisch auf einer Groesse. */
.diashow__punkt[aria-current] circle{fill:#fff;stroke:none}
.diashow__punkt:focus-visible{outline:2px solid var(--orange-ink);outline-offset:-2px;border-radius:50%}

@media (prefers-reduced-motion:reduce){
  .diashow--js .slideshow > img{opacity:0;transition:none}
  .diashow--js .slideshow > img.aktiv{opacity:1}
}

/* --- Marken-Laufband ----------------------------------------------------
   Feste Pixelmaße wie im Original — dieser Block skaliert dort nicht mit.  */
.bxc__inner{width:100%;padding:20px 0}
.bxc__marquee{overflow:hidden;width:100%}
.bxc__track{display:flex;width:max-content;animation:bxc-scroll 40s linear infinite}
.bxc__set{display:flex;gap:20px;padding-right:20px}
@keyframes bxc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bxc__track{animation:none}}

/* Das Laufband haelt an, solange der Zeiger darauf liegt. Angehaengt wird
   der Zustand am Track selbst, damit die Position erhalten bleibt und das
   Band beim Verlassen weiterlaeuft statt zu springen.                       */
.bxc__marquee:hover .bxc__track,
.bxc__marquee:focus-within .bxc__track{animation-play-state:paused}

/* Der Rahmen ist derselbe Verlauf wie bei den Link-Buttons darueber —
   Orange links, nach rechts in Schwarz auslaufend. Werte bewusst 1:1 aus
   .buttons a uebernommen; wird der Button geaendert, gehoert es auch
   hierher. Frueher stand hier ein eigener, hart geteilter Diagonalverlauf
   mit einem eigenen Orangeton (--orange-kachel), der dadurch entfallen ist. */
.bxc__tile{
  flex:0 0 auto;width:180px;height:95px;
  border-radius:13px;
  background-color:var(--orange-fill);
  background-image:linear-gradient(300deg,#000 34%,rgba(232,96,10,.01) 83%);
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;
}
.bxc__panel{
  width:164px;height:79px;
  background-color:var(--panel);border-radius:5px;padding:4px 6px;
  display:flex;align-items:center;justify-content:center;
}
.bxc__logo{max-height:36px;max-width:108px;object-fit:contain;display:block}

/* Einige Logos fallen bei diesen Grenzen optisch zu klein oder zu gross aus,
   weil ihr Seitenverhaeltnis stark von den uebrigen abweicht. Sehr breite
   Marken stossen an die Breitengrenze und erreichen dadurch nur einen Teil
   der Flaeche der anderen; die folgenden Ausnahmen gleichen das an.
   Die helle Karte bietet nutzbar 152x71 px, alle bleiben darunter.           */
.bxc__logo--breit{max-width:144px}      /* Siemens Gamesa       -> 144x24 */
.bxc__logo--denza{max-width:144px;max-height:38px}  /* Denza      -> 143x38 */
.bxc__logo--popken{max-width:124px}     /* Popken Fashion Group -> 124x31 */
.bxc__logo--klein{max-height:32px;max-width:97px}  /* EWE        ->  97x32 */

/* --- Formular ----------------------------------------------------------- */
.form-component{display:flex}
.form-component > .inner{width:calc(100% - 1.5rem)}
.field{margin-top:1rem}
.field:first-child{margin-top:0}

.form-component input[type=text],
.form-component input[type=email],
.form-component textarea{
  display:block;width:100%;
  background-color:transparent;
  border:1px solid var(--field-border);
  border-radius:var(--radius-s);
  color:rgba(255,255,255,.8);
  font-family:var(--font);font-weight:300;font-size:.8125rem;
  outline:none;
}
.form-component input[type=text],
.form-component input[type=email]{height:2.518rem;padding:0 .875rem}
.form-component textarea{height:10.018rem;padding:.59rem .875rem .875rem;resize:vertical;line-height:1.4}
.form-component ::placeholder{color:rgba(255,255,255,.5);opacity:1}
.form-component input:focus,.form-component textarea:focus{border-color:var(--orange-ink)}

.checkbox{position:relative;margin-top:1rem}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox label{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--font);font-weight:300;
  font-size:.8125rem;line-height:1.32rem;letter-spacing:.025rem;
  color:rgba(255,255,255,.8);cursor:pointer;
}
/* Der Text steht in einem eigenen span, damit er als ein einziges
   Flex-Element umbricht. Ohne das wuerde der Link daneben eine eigene
   Spalte bilden. */
.checkbox label > span{flex:1}
.checkbox label a{color:var(--orange-ink);text-decoration:underline;text-underline-offset:2px}
.checkbox label a:hover{color:var(--text)}
.checkbox label::before{
  content:"";flex:0 0 auto;
  width:35px;height:35px;
  border:1px solid var(--field-border);border-radius:var(--radius-s);
  background-color:transparent;
}
.checkbox input:checked + label::before{
  background-color:var(--orange-fill);border-color:var(--orange-fill);
}
.checkbox input:focus-visible + label::before{
  outline:2px solid var(--orange-ink);outline-offset:3px;
}

/* --- Aktionsblock -------------------------------------------------------
   Im Original stand hier zusätzlich eine reCAPTCHA-Box von Google. Sie ist
   entfallen; der Spamschutz läuft jetzt ohne Drittanbieter (Spamfalle im
   Formular und Zeitprüfung im Skript auf dem Server).                       */
.actions{margin-top:1rem}

.form-component button{
  width:100%;height:2.518rem;
  border:0;border-radius:var(--radius-s);
  background-color:var(--orange-fill);
  color:var(--text);font-family:var(--font);font-weight:500;font-size:1rem;
  cursor:pointer;transition:filter .2s ease;
}
.form-component button:hover{filter:brightness(1.12)}

/* --- Zugänglichkeit ----------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--orange-ink);outline-offset:3px}

/* --- Spamfalle -----------------------------------------------------------
   Ein zusaetzliches Feld, das nur automatische Skripte ausfuellen. Es wird
   nicht per display:none versteckt, weil manche Bots genau darauf achten.  */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* --- Rechtstexte ---------------------------------------------------------
   Eigene Typografie fuer Impressum und Datenschutz. Die Regeln stehen mit
   zwei Klassen, damit sie den Reset in .inner sicher ueberschreiben.       */
.legal{text-align:left}
.legal-back a{
  font-family:var(--font);font-weight:300;font-size:.8125rem;
  color:rgba(255,255,255,.66);text-decoration:none;
}
.legal-back a:hover{color:var(--text)}

.inner .legal h1{
  font-family:var(--font);font-weight:700;
  font-size:1.75rem;letter-spacing:.025rem;line-height:2.2rem;
  color:var(--text);text-align:center;
  margin:0;
}
/* Wort- und Bildmarke als Ueberschrift: die Grafik bringt ihren eigenen
   Rand mit, deshalb steht sie ohne zusaetzliche Abstaende. Muss hinter
   ".inner .legal h1" stehen und denselben Aufbau haben.                  */
.inner .legal h1.wortmarke{margin:0;line-height:0}
.wortmarke img{display:block;width:80%;height:auto;margin:0 auto}
.inner .legal h2{
  font-family:var(--font);font-weight:400;
  font-size:.8125rem;letter-spacing:.15rem;line-height:1.4rem;
  color:var(--orange-ink);text-transform:uppercase;
  margin:1.75rem 0 .625rem;
}
.inner .legal h3{
  font-family:var(--font);font-weight:500;
  font-size:.9375rem;line-height:1.4rem;letter-spacing:.025rem;
  color:var(--text);margin:1.125rem 0 .375rem;
}
.inner .legal p,
.inner .legal ul{
  font-family:var(--font);font-weight:300;
  font-size:.875rem;line-height:1.42188rem;letter-spacing:.025rem;
  color:rgba(255,255,255,.86);
  margin:0 0 .75rem;
}
.inner .legal ul{list-style:disc;padding-left:1.15rem}
/* Muss hinter ".inner .legal p" stehen und denselben Aufbau haben, sonst
   gewinnt dort das allgemeine .75rem. */
.inner .legal p.legal-back{margin:0 0 3rem}
.inner .legal ul.footer-links{list-style:none;padding-left:0;margin:2.75rem 0 0}
/* Wie auf der Startseite: der Knopf braucht mehr Luft nach oben als den
   Standardabstand. Muss hinter ".inner .legal ul.buttons" stehen.         */
.inner .legal p + ul.buttons--cta{margin-top:1.25rem}
/* Knopfleisten innerhalb der Rechtstexte und Unterseiten sollen keine
   Aufzaehlungspunkte und keine Linkfarbe erben. */
.inner .legal ul.buttons{list-style:none;padding-left:0;margin:var(--spacing) 0}
.legal .buttons a{color:var(--text);text-decoration:none}
.inner .legal li{margin-bottom:.25rem}
.inner .legal .address{color:var(--text)}
.inner .legal .stand{color:rgba(255,255,255,.5);font-size:.8125rem;margin-top:1.5rem}
.legal a{color:var(--orange-ink);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--text)}
/* Produkt- und Markennamen im Fliesstext tragen den kraeftigen Akzentton
   statt des helleren Verweistons: sie sind Teil der Aussage, nicht ein
   Hinweis auf eine Fussnote. Nur dort, wo die Klasse ausdruecklich gesetzt
   ist — die Verweise in den Rechtstexten bleiben bei --orange-ink.
   Die Angabe fuers Ueberfahren muss mit, weil ".legal a.marke" und
   ".legal a:hover" dieselbe Gewichtung haben und sonst die spaetere Regel
   auch im Ueberfahren-Zustand gewinnen wuerde.                            */
.legal a.marke{color:var(--orange)}
.legal a.marke:hover{color:var(--text)}

/* Noch offene Angaben werden sichtbar markiert, damit sie nicht
   versehentlich veroeffentlicht werden. */
.todo{
  background-color:rgba(232,96,10,.35);
  border:1px dashed var(--orange-ink);
  border-radius:.25rem;padding:0 .3rem;color:var(--text);
}

/* --- Fusszeile ----------------------------------------------------------- */
.inner .footer-links{
  display:flex;justify-content:center;align-items:center;
  gap:.5rem 1.25rem;flex-wrap:wrap;margin:2.75rem 0 0;
}
.footer-links a{
  font-family:var(--font);font-weight:300;
  font-size:.8125rem;line-height:1.3rem;letter-spacing:.025rem;
  color:rgba(255,255,255,.66);text-decoration:none;
}
.footer-links a:hover{color:var(--text);text-decoration:underline}
.footer-links a[aria-current=page]{color:var(--text)}


/* --- Rueckmeldung nach dem Absenden -------------------------------------- */
.inner .notice{
  font-family:var(--font);font-weight:300;
  font-size:.9375rem;line-height:1.5rem;letter-spacing:.025rem;
  color:var(--text);text-align:center;margin:0 0 1rem;
}
.inner .notice--fehler{color:#ffb59a}

/* --- Galerie "Meine Technik" ----------------------------------------------
   Zwei Spalten als Raster, nicht als Mauerwerk. Der Unterschied ist die
   Lesereihenfolge: Im Mauerwerk (CSS columns) fuellt der Browser erst die
   linke Spalte ganz und faengt dann rechts oben wieder an — Bild 5 steht
   dann unten links, Bild 6 oben rechts. Wer von links nach rechts liest,
   sieht die Bilder in einer anderen Folge als sie im Quelltext stehen.
   Im Raster laeuft die Reihenfolge zeilenweise, so wie man liest.

   Das eine Hochformat bekommt die Klasse "hoch" und belegt zwei Zeilen.
   Dadurch behaelt es seine Proportionen und wird nicht beschnitten; die
   Zeilenhoehen ergeben sich aus den Bildern selbst, feste Masse braucht es
   nirgends. Unter 480 px bleibt eine Spalte — zwei waeren auf dem Telefon
   nur noch rund 140 px breit.                                              */
.galerie{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:.5rem;align-items:start;
}
.galerie a.hoch{grid-row:span 2}
@media (max-width:480px){
  .galerie{grid-template-columns:1fr}
  .galerie a.hoch{grid-row:auto}
}

.galerie a{
  display:block;
  border:1px solid var(--card-border);border-radius:var(--radius-s);
  overflow:hidden;line-height:0;cursor:zoom-in;
  transition:transform .25s ease,border-color .25s ease;
}
.galerie a img{display:block;width:100%;height:auto}
.galerie a:hover{transform:scale(1.015);border-color:rgba(232,96,10,.55)}
.galerie a:focus-visible{outline:2px solid var(--orange-ink);outline-offset:3px}

/* Bildnachweis unter der Galerie: klein und zurueckhaltend, der Name selbst
   traegt die Verweisfarbe der Rechtstexte.                                 */
.inner .legal p.galerie-credit{
  font-size:.8125rem;color:rgba(255,255,255,.5);
  margin:1.75rem 0 .625rem;
}

/* Der Satz unmittelbar vor dem Booking-Knopf. Der Knopf steht mittig
   (.buttons--cta), deshalb gehoert die Frage darueber ebenfalls in die Mitte
   — sonst stehen Frage und Antwort versetzt zueinander. Auf der Startseite
   loest das .body-text, das dort ohnehin zentriert ist; in den Rechtstexten
   und Unterseiten ist .legal linksbuendig, also braucht es diese Regel.    */
.inner .legal p.aufforderung{text-align:center}

/* --- Lupe ----------------------------------------------------------------
   Liegt am <body>, nicht in der Karte: die Karte traegt backdrop-filter und
   wird dadurch zum Bezugsrahmen fuer alles, was darin position:fixed ist.
   Innerhalb der Karte waere die Lupe auf deren Breite eingesperrt.
   Das Skript baut sie ein; ohne JavaScript entsteht sie gar nicht, und ein
   Klick auf eine Kachel oeffnet schlicht das grosse Bild.                   */
html.lupe-offen{overflow:hidden}

.lupe{
  position:fixed;inset:0;z-index:50;
  background-color:rgba(8,8,8,.95);
  -webkit-backdrop-filter:blur(.25rem);
          backdrop-filter:blur(.25rem);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
/* Solange die Lupe zu ist, faengt sie keine Klicks ab. Das ist die Absicherung
   fuer den Fall, dass das Skript sie nicht rechtzeitig aus dem Baum nimmt —
   sonst laege eine unsichtbare Flaeche ueber der ganzen Seite.             */
.lupe[data-offen]{opacity:1;pointer-events:auto}

.lupe__buehne{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:3.25rem 3.25rem 4.25rem;
}
.lupe__bild{
  display:block;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  border-radius:.375rem;
}

/* Knoepfe in der Sprache der Diashow auf der Startseite: runder Grund,
   feiner Rand, zurueckhaltend bis zum Darueberfahren.                       */
.lupe__schliessen,
.lupe__pfeil{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;padding:0;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  background-color:rgba(23,18,23,.55);
  -webkit-backdrop-filter:blur(.2rem);
          backdrop-filter:blur(.2rem);
  color:var(--text);cursor:pointer;
  opacity:.72;transition:opacity .2s ease,background-color .2s ease;
}
.lupe__schliessen:hover,
.lupe__pfeil:hover{opacity:1;background-color:rgba(23,18,23,.85)}
.lupe__schliessen:focus-visible,
.lupe__pfeil:focus-visible{opacity:1;outline:2px solid var(--orange-ink);outline-offset:3px}

.lupe__schliessen{top:.75rem;right:.75rem}
.lupe__pfeil--zurueck{top:50%;left:.75rem;transform:translateY(-50%)}
.lupe__pfeil--vor{top:50%;right:.75rem;transform:translateY(-50%)}

.lupe__schliessen svg,
.lupe__pfeil svg{
  width:1.15rem;height:1.15rem;
  fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}

.lupe__fuss{
  position:absolute;left:0;right:0;bottom:0;
  padding:.75rem 1rem 1rem;text-align:center;
  pointer-events:none;
}
.lupe__fuss p{margin:0}
.lupe__zaehler{
  font-family:var(--font);font-weight:300;
  font-size:.75rem;line-height:1.2rem;letter-spacing:.05rem;
  color:rgba(255,255,255,.45);
}

/* Auf schmalen Bildschirmen ruecken die Pfeile nach unten neben den
   Zaehler — seitlich wuerden sie sonst auf dem Bild liegen.                 */
@media (max-width:560px){
  .lupe__buehne{padding:3.25rem .75rem 5.5rem}
  .lupe__pfeil--zurueck{top:auto;bottom:.9rem;left:1.25rem;transform:none}
  .lupe__pfeil--vor{top:auto;bottom:.9rem;right:1.25rem;transform:none}
  .lupe__fuss{padding-bottom:1.25rem}
}

@media (prefers-reduced-motion:reduce){
  .galerie a{transition:none}
  .galerie a:hover{transform:none}
  .lupe{transition:none}
}

/* Der Lautsprecher ist eine geschlossene Flaeche und wirkt dadurch schwerer
   als die uebrigen Umrisssymbole — etwas kleiner steht er optisch gleichauf. */
.buttons svg.icon-technik{width:1.35rem;height:1.35rem;margin-right:.1rem}