/* Gäste-App (app.wangerland.live) — Ergänzung zu style.css, nicht Ersatz.
   Wiederverwendet Bausteine des Forums (.knopf, .mini, .kurier-gezeiten,
   .kurier-warnung), hat aber eine eigene Bildsprache.

   Leitbild seit September 2026: maritimes Patchwork, wie ein Stoff aus
   bedruckten Quadraten — Rostrot, Marineblau, Petrol, ein aquarelliges
   Blauviolett und Aqua auf hellem Grund, dazu Wellenlinien, eine leicht
   abgenutzte Drucktextur und ein Tau als Trennlinie. Die Vorlage war eine
   Musterdatei von Freepik; übernommen sind nur Farbstimmung und Motivwelt,
   keine Grafik. Alle Muster hier sind selbst gezeichnet (SVG im CSS), damit
   kein Bild nachgeladen werden muss und nichts Fremdes auf dem Server liegt.

   Schriften: Die Hauptüberschrift (h1) steht in Poiret One, einer schlanken
   Art-déco-Schrift (frei, SIL OFL; als freie Alternative zur kaufpflichtigen
   „Sailor Girl" gewählt, 25.09.2026). Die Datei liegt unter assets/fonts/,
   eingebunden in app/views/layout.php. Zwischenüberschriften (h2) stehen in
   einer schmalen Systemschrift in Großbuchstaben (--app-schmal), der Rest
   serifenlos. */

:root {
  --app-marine: #1D2B4F;
  --app-rost:   #B4472C;
  --app-petrol: #22798A;
  --app-indigo: #4E5FB6;
  --app-aqua:   #8CC5CC;
  --app-grund:  #F7F6F2;
  --app-nebel:  #ECEBE6;
  --app-rand:   #E1DFD8;

  /* Wellenlinien — das Grundmuster, wie liniertes Meer. */
  --app-wellen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cpath d='M0 7c6-5 18-5 24 0s18 5 24 0' fill='none' stroke='%238CC5CC' stroke-width='1.3'/%3E%3C/svg%3E");
  /* Eine einzelne Welle als Unterstrich für Zwischenüberschriften. */
  --app-welle:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='8'%3E%3Cpath d='M1 4c4-4 9-4 12.5 0s8.5 4 12.5 0 8.5-4 12.5 0 8.5 4 12.5 0' fill='none' stroke='%234E5FB6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Abgenutzter Druck: helle Sprenkel, über die Farbflächen gelegt. */
  --app-korn:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 3 -1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  /* Tau: gedrehte Hanfstränge als Trennlinie. */
  --app-tau:    repeating-linear-gradient(-58deg, #A8966C 0 2.5px, #D2C39C 2.5px 5.5px);

  /* Schmale Systemschrift in Großbuchstaben — die Stimme der ##-Überschriften
     und zugleich der Ersatz, falls die Titelschrift nicht lädt. */
  --app-schmal: "DIN Condensed", "Avenir Next Condensed", "sans-serif-condensed", "Arial Narrow", sans-serif;
  --app-titelschrift: "Poiret One", var(--app-schmal);
}

body.app-seite { background: var(--app-grund); color: var(--text); }

.app-seite h1 {
  font-family: var(--app-titelschrift);
  font-weight: 700;
  font-synthesis: none;          /* Poiret One hat nur einen Schnitt — nicht künstlich fetten */
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.02;
  color: var(--app-marine);
  text-wrap: balance;
}
.app-seite h2 {
  font-family: var(--app-schmal);
  font-weight: 700;
  font-synthesis: none;
  font-size: 1.3rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--app-marine);
}
.app-seite h3 {
  font-family: inherit;
  font-weight: 650;
  color: var(--app-marine);
}

/* ------------------------------------------------------------ Kopf */
/* Kopf und Inhalt teilen sich dieselben Kanten: gleiche Höchstbreite, gleicher
   seitlicher Innenabstand (16px) wie .app-inhalt. Das Signet steht damit
   links genau über den Kästen darunter, die Koordinaten rechts schließen mit
   ihnen ab. Wer eins der beiden ändert, muss das andere mitändern. */
.app-kopf {
  background: #fff var(--app-wellen);
  background-size: 48px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--app-rand);
}
.app-kopf__innen {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Das Signet in Blau auf hell — „die blaue Welle". Es färbt sich über
   currentColor, also reicht die Farbe hier. */
.app-signet { color: var(--app-petrol); flex: none; margin-left: -1px; } /* Grafik hat 1px Luft links */
/* Signet und Name zusammen als ein Link zurück zur Startseite. */
.app-kopf__heim {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.app-kopf__heim:hover .app-signet { color: var(--app-marine); }
.app-kopf__heim:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 3px; border-radius: 4px; }
.app-kopf__marke,
.app-kopf__lage {
  background: #fff;              /* sitzt lesbar über den Wellenlinien */
  padding: 2px 6px;
  border-radius: 3px;
}
.app-kopf__marke {
  color: var(--app-marine);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
}
/* Wie nachträglich mit dem Stift dazugeschrieben: leicht schräg, in Rostrot,
   in einer Handschrift, die das Gerät ohnehin mitbringt — Apple (Bradley
   Hand, Noteworthy), Windows (Segoe Print, Ink Free), Android (cursive).
   So muss keine fremde Schrift geladen werden. */
.app-kopf__zusatz {
  display: block;
  margin: 1px 0 0 14px;
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", "Ink Free", cursive;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--app-rost);
  transform: rotate(-3deg);
  transform-origin: left center;
}
.app-kopf__lage {
  margin-left: auto;
  padding-right: 0;              /* Textkante = Kastenkante darunter */
  color: var(--app-petrol);
  font-size: .66rem;
  line-height: 1.3;
  letter-spacing: .08em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-inhalt {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* ------------------------------------------------------------ Masthead
   Hellgraues Feld wie Leinen, unten ein Tau über die ganze Breite. Hier hat
   die Titelschrift ihren großen Auftritt. */
.app-hero {
  position: relative;
  overflow: hidden;
  background: var(--app-nebel);
  border-radius: 6px;
  padding: 24px 22px 0;
  margin-bottom: 16px;
}
.app-hero::after {
  content: "";
  display: block;
  height: 6px;
  margin: 20px -22px 0;
  background: var(--app-tau);
}
/* Text links, Logo rechts im Kasten — unten bündig mit der Datumszeile. */
.app-hero__kopf {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.app-hero__text { flex: 1 1 auto; min-width: 0; }
.app-hero__logo {
  display: block;
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1.5px solid var(--app-marine);
  flex: none;
}
.app-hero h1 {
  font-size: 2.1rem;
  margin: 0 0 6px;
}
.app-hero__datum {
  color: var(--app-rost);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}
.app-hero .mini { margin: 0 0 10px; }
.app-hero .mini a { color: var(--app-petrol); font-weight: 600; text-decoration: none; }

/* ------------------------------------------------------------ Karten */
.app-karte {
  background: #fff;
  border: 1px solid var(--app-rand);
  border-radius: 6px;
  padding: 22px 20px;
  margin-bottom: 16px;
}
.app-karte h2 {
  margin: 0 0 14px;
  padding-bottom: 12px;
  background: var(--app-welle) no-repeat left bottom / 52px 8px;
}

/* Die Kurier-Freitexte stehen im gedruckten Blatt (und in dessen Vorschau im
   Forum) mit Serifen — in der App nicht: Hier ist alles serifenlos. */
.app-seite .eigen { font-family: inherit; font-size: .95rem; line-height: 1.5; }

.app-wetter { display: flex; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; }
.app-wetter__tag { flex: 1 1 140px; min-width: 140px; }
.app-wetter__wann {
  font-weight: 700; font-size: .72rem; color: var(--app-indigo);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px;
}
.app-wetter__zeile { display: flex; gap: 8px; align-items: center; }
.app-wetter__grad { font-size: 1.5rem; font-weight: 700; color: var(--app-marine); line-height: 1.05; }
.app-wetter__grad span { font-size: .8rem; font-weight: 400; color: var(--text-leise); }
.app-gezeiten { margin-top: 4px; }
/* Uhrzeit oben, Pegelstand darunter — sonst bricht „cm" auf dem Handy
   einzeln in die nächste Zeile. */
.app-gezeiten td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-gezeiten td .mini { display: block; }

/* ------------------------------------------------------------ Kacheln
   Das Patchwork: quadratische Flicken im 3er-Raster, jeder in seiner Farbe,
   mit Symbol, feinem Innenrahmen wie ein Etikett und abgenutztem Druck.
   Wetter/Gezeiten und die beiden Kurier-Freitexte bleiben oberhalb direkt
   lesbar, alles Weitere steckt hinter den Kacheln. */
.app-kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.app-kachel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 14px 10px;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 1px 2px rgba(29,43,79,.12), 0 3px 10px rgba(29,43,79,.08);
  transition: transform .15s ease;
}
.app-kachel::before {                       /* Etikettenrahmen */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 3px;
  pointer-events: none;
}
.app-kachel::after {                        /* Drucktextur */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--app-korn);
  background-size: 180px 180px;
  opacity: .42;
  pointer-events: none;
}
.app-kachel:hover { color: #fff; transform: translateY(-2px); }
.app-kachel:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }
.app-kachel .symbol { position: relative; z-index: 1; stroke-width: 1.5; }
.app-kachel__titel,
.app-kachel__teaser { position: relative; z-index: 1; }
.app-kachel__titel {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.2;
}
.app-kachel__teaser {
  font-size: .7rem;
  opacity: .88;
  line-height: 1.3;
}
.app-kachel--entdecken { background: var(--app-marine); }
.app-kachel--termine   { background: var(--app-petrol); }
.app-kachel--angebote  { background: var(--app-rost); }
.app-kachel--essen     { background: var(--app-indigo); }

@media (max-width: 480px) {
  .app-kacheln { gap: 8px; }
  .app-kachel { padding: 10px 6px; gap: 5px; }
  .app-kachel .symbol { width: 28px; height: 28px; }
  .app-kachel__titel { font-size: .64rem; letter-spacing: .04em; }
  .app-kachel__teaser { display: none; }
  .app-hero h1 { font-size: 1.8rem; }
  .app-hero__logo { width: 74px; height: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-kachel { transition: none; }
  .app-kachel:hover { transform: none; }
}

/* ------------------------------------------------------------ Unterseiten */
/* Eigene Bausteine der Betriebe: ein rostroter Streifen links macht jeden
   als „das schreibt das Haus selbst" erkennbar. */
.app-baustein {
  border-left: 3px solid var(--app-rost);
  padding-left: 16px;
}
.app-baustein + .app-baustein { margin-top: 18px; }
.app-baustein h3 { font-size: 1.05rem; margin-bottom: 6px; }

.app-ziel + .app-ziel { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--app-rand); }
.app-ziel h3 { font-size: 1.02rem; margin-bottom: 4px; }
.app-ziel h3 .mini { font-weight: 400; }

/* ------------------------------------------------------------ Karussells
   Veranstaltungen: je Zeitraum ein waagerechtes Band zum Wischen. Die
   nächste Karte schaut rechts ein Stück herein — so sieht man, dass es
   weitergeht, ohne dass es einen Hinweis braucht. Einrasten per
   scroll-snap, kein Skript nötig; die Pfeile sind nur für Maus und Tastatur. */
.app-karussell { margin-bottom: 26px; }
.app-karussell__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.app-karussell h2 {
  margin: 0;
  padding-bottom: 12px;
  background: var(--app-welle) no-repeat left bottom / 52px 8px;
}
.app-karussell__zusatz {
  margin: 6px 0 0;
  color: var(--app-rost);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.app-karussell__knoepfe { display: flex; gap: 6px; flex: none; }
.app-karussell__knopf {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--app-marine);
  background: #fff;
  color: var(--app-marine);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.app-karussell__knopf:hover { background: var(--app-marine); color: #fff; }
.app-karussell__knopf:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }
.app-karussell__leer {
  margin: 0;
  padding: 16px 18px;
  border: 1px dashed var(--app-rand);
  border-radius: 6px;
  color: var(--text-leise);
  font-size: .9rem;
}
.app-karussell__band {
  list-style: none;
  margin: 0;
  padding: 2px 0 6px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 46%;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.app-karussell__band::-webkit-scrollbar { display: none; }
@media (max-width: 480px) {
  .app-karussell__band { grid-auto-columns: 82%; }
}

.app-vkarte {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--app-rand);
  border-radius: 6px;
  overflow: hidden;
}
/* Das Foto steht vollständig im Rahmen (contain), nie beschnitten — die
   Bilder stehen unter CC BY-SA, siehe src/destination.php. Ohne Foto
   springt ein Patchwork-Flicken ein, wie bei den Kacheln. */
.app-vkarte__bild {
  position: relative;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-nebel);
  color: #fff;
}
.app-vkarte__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.app-vkarte__bild--ohne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--app-korn);
  background-size: 180px 180px;
  opacity: .42;
}
.app-vkarte__bild--marine { background: var(--app-marine); }
.app-vkarte__bild--petrol { background: var(--app-petrol); }
.app-vkarte__bild--rost   { background: var(--app-rost); }
.app-vkarte__bild .symbol { position: relative; z-index: 1; stroke-width: 1.4; }
.app-vkarte__nachweis {
  position: absolute;
  right: 0; bottom: 0;
  max-width: 100%;
  padding: 2px 7px;
  border-top-left-radius: 4px;
  background: rgba(29,43,79,.72);
  color: #fff;
  font-size: .62rem;
  line-height: 1.4;
  /* Nie abschneiden: Urheber UND Lizenz müssen lesbar bleiben (CC BY-SA),
     also lieber zweizeilig als mit „…". */
  text-align: right;
}
.app-vkarte__nachweis a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* „Impressionen“ auf der Startseite: breitere Karten, das Foto steht
   im Vordergrund. Auch hier contain statt Beschnitt; wo ein Foto nicht genau
   3:2 hat, bleibt ein marineblauer Rand wie bei einem Diarahmen. */
.app-karussell--fotos .app-karussell__band { grid-auto-columns: 84%; }
.app-vkarte--foto .app-vkarte__bild { background: var(--app-marine); }
.app-vkarte--foto .app-vkarte__text { padding: 10px 14px 12px; }
.app-vkarte--foto h3 a { color: inherit; text-decoration: none; }
.app-vkarte--foto h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-vkarte--foto h3 a:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }
@media (max-width: 480px) {
  .app-karussell--fotos .app-karussell__band { grid-auto-columns: 88%; }
}
.app-vkarte__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 14px 14px;
}
.app-vkarte__wann {
  margin: 0 0 4px;
  color: var(--app-petrol);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.app-vkarte__wann.ist-offen { color: #2F7D4F; }
.app-vkarte__wann.ist-offen::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}
.app-vkarte h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 4px; }
.app-vkarte__wo { margin: 0; color: var(--text-leise); font-size: .84rem; line-height: 1.4; }

.app-quelle { text-align: center; margin: 20px 0 0; }

/* ------------------------------------------------------------ Fuß */
.app-fuss { text-align: center; padding: 8px 18px 40px; color: var(--text-leise); font-size: .82rem; }
.app-tau {
  width: 140px;
  height: 6px;
  margin: 0 auto 18px;
  border-radius: 3px;
  background: var(--app-tau);
}
.app-fuss a { color: var(--text-leise); text-decoration: underline; }

/* Wege unter den Karussell-Karten: Hörer ruft an, Leuchtturm führt nach
   draußen (Webseite des Betriebs, Seite der Veranstaltung). Runde Knöpfe
   statt Wörter, 40 px groß, damit der Daumen sie auch im schmalen Karussell
   sicher trifft. Die Beschriftung steht im aria-label und wird vorgelesen. */
.app-wege {
  margin: auto 0 0;
  padding-top: 12px;
  display: flex;
  gap: 10px;
}
.app-wege a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--app-rand);
  border-radius: 50%;
  color: var(--app-rost);
  text-decoration: none;
}
.app-wege a:hover { background: var(--app-nebel); border-color: var(--app-rost); }
.app-wege a:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }

/* Beschreibung eines Ausflugsziels in der Karte: ganz, aber zugeklappt
   (siehe _karte_ziel.php, warum nicht per Zeilenbegrenzung gekürzt wird). */
.app-vkarte__mehr { margin: 8px 0 0; font-size: .86rem; }
.app-vkarte__mehr summary {
  cursor: pointer;
  color: var(--app-rost);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.app-vkarte__mehr summary:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }
.app-vkarte__mehr p { margin: 6px 0 0; line-height: 1.45; color: var(--text); }

/* ------------------------------------------------------------ Anlässe
   „Was darf's heute sein?“: kleinere, helle Kacheln unter den großen —
   Wegweiser nach Situation statt nach Rubrik. Farbe trägt nur das Symbol,
   damit die elf Kacheln neben den drei großen nicht laut werden. */
.app-anlaesse { margin: 0 0 22px; }
.app-anlaesse h2 {
  margin: 0 0 12px;
  padding-bottom: 12px;
  background: var(--app-welle) no-repeat left bottom / 52px 8px;
}
.app-anlaesse__raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.app-anlass--breit { grid-column: 1 / -1; }
.app-anlass {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--app-rand);
  border-radius: 5px;
  color: var(--app-marine);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(29,43,79,.06);
  transition: transform .15s ease, border-color .15s ease;
}
.app-anlass:hover { color: var(--app-marine); border-color: var(--app-marine); transform: translateY(-1px); }
.app-anlass:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }
.app-anlass .symbol { flex: none; }
.app-anlass--marine .symbol { color: var(--app-marine); }
.app-anlass--petrol .symbol { color: var(--app-petrol); }
.app-anlass--rost   .symbol { color: var(--app-rost); }
.app-anlass--indigo .symbol { color: var(--app-indigo); }
.app-anlass__titel {
  font-family: var(--app-schmal);
  font-weight: 700;
  font-synthesis: none;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.app-anlass.ist-empfohlen { background: var(--app-nebel); border-color: var(--app-rost); }
.app-anlass__marke {
  position: absolute;
  top: -8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--app-rost);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .app-anlass { transition: none; }
  .app-anlass:hover { transform: none; }
}

/* Einleitungssatz unter dem Kopf einer Anlass-Seite. */
.app-vorspann { margin: -4px 0 20px; color: var(--text-leise); font-size: .95rem; line-height: 1.45; }

/* ------------------------------------------------------------ Link-Kachel
   Breite Kachel zwischen den beiden Kurier-Freitexten, wie ein Wegweiser-
   Schild aus der Vorlage: Petrol, Etikettenrahmen, Drucktextur, Pfeil. Der
   Text ist frei (höchstens 40 Zeichen, siehe APP_LINK_TEXT_MAX) und darf auf
   schmalen Handys zweizeilig werden, nie abgeschnitten. */
.app-linkkachel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 84px;
  margin-bottom: 16px;
  padding: 18px 24px;
  border-radius: 5px;
  background: var(--app-petrol);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(29,43,79,.12), 0 3px 10px rgba(29,43,79,.08);
  transition: transform .15s ease;
}
.app-linkkachel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 3px;
  pointer-events: none;
}
.app-linkkachel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--app-korn);
  background-size: 180px 180px;
  opacity: .42;
  pointer-events: none;
}
.app-linkkachel:hover { color: #fff; transform: translateY(-2px); }
.app-linkkachel:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }
.app-linkkachel__text,
.app-linkkachel__pfeil { position: relative; z-index: 1; }
.app-linkkachel__text {
  font-family: var(--app-schmal);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: .05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  /* Versalien haben keine Unterlängen, die Zeile hält unten trotzdem Platz
     dafür frei, und der Text säße sichtbar über der Mitte. Beschnitten auf
     Versalhöhe und Grundlinie steht er mittig neben dem Pfeil. */
  text-box: trim-both cap alphabetic;
}
.app-linkkachel__pfeil { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .app-linkkachel { transition: none; }
  .app-linkkachel:hover { transform: none; }
}

/* ------------------------------------------------------------ Für Ihren Aufenthalt
   Was ein Haus selbst beisteuert, in seiner Reihenfolge: Links als breite
   Kachel (wie bisher die Link-Kachel), eigene Bausteine als Karte, Module als
   Zeile zu ihrer Seite. Rost ist die Farbe für alles, was das Haus selbst
   beiträgt. */
.app-elemente { display: grid; gap: 10px; margin-bottom: 16px; }
.app-elemente > h2 { margin: 0 0 2px; padding-bottom: 12px; background: var(--app-welle) no-repeat left bottom / 52px 8px; }
.app-elemente .app-linkkachel,
.app-elemente .app-karte { margin-bottom: 0; }
.app-elemente__baustein { border-left: 3px solid var(--app-rost); }
.app-elemente__baustein h3 { margin: 0 0 6px; font-size: 1.05rem; }
.app-elemente__baustein p { margin: 0; line-height: 1.5; }
.app-modulzeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--app-rand);
  border-left: 4px solid var(--app-rost);
  border-radius: 6px;
  color: var(--app-marine);
  text-decoration: none;
}
.app-modulzeile:hover { border-color: var(--app-rost); }
.app-modulzeile:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }
.app-modulzeile__symbol { flex: none; color: var(--app-rost); }
.app-modulzeile__text { flex: 1; display: grid; gap: 2px; }
.app-modulzeile__text strong { font-size: 1rem; }
.app-modulzeile__text span { font-size: .84rem; color: var(--text-leise); }
.app-modulzeile__pfeil { flex: none; font-size: 1.4rem; color: var(--app-rost); }

.app-modul__vorspann { margin: 0 0 18px; font-size: 1rem; line-height: 1.5; }
.app-modul__punkt + .app-modul__punkt { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--app-rand); }
.app-seite .app-modul__punkt h2 { margin: 0 0 6px; font-size: 1.05rem; }
.app-modul__punkt p { margin: 0; line-height: 1.5; }
.app-modul__schluss { margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed var(--app-rand); font-style: italic; line-height: 1.5; }
.app-modul__stand { margin: 20px 0 0; }

/* Häufige Fragen: Frage zum Aufklappen, Antwort darunter. */
.app-faq summary { cursor: pointer; font-weight: 650; color: var(--app-marine); line-height: 1.4; }
.app-faq summary:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }
.app-faq p { margin: 8px 0 0; }

/* Welcome-Desk: Bestätigen und Abmelden aus den Gästemails (app/views/welcome.php) */
.welcome-gast-seite h1 { font-size: 1.8rem; margin: 0 0 12px; }
.welcome-gast-seite form { margin: 18px 0 0; }
.welcome-gast-seite .knopf { background: var(--app-petrol); border-color: var(--app-petrol); }  /* Gästeservice = Petrol */
.welcome-gast-seite .knopf:hover { background: var(--app-marine); border-color: var(--app-marine); }
.welcome-gast-seite .knopf:focus-visible { outline: 3px solid var(--app-indigo); outline-offset: 2px; }