/* Zwei Ringe (Branchen oben, Designs unten): gemeinsame Stile fuer Startseite und Ortsseiten.
   Skript: /ringe-startseite.js. Vorher Inline-Block in index.html. */
/* ============== ZWEI RINGE (Branchen oben, Designs unten) ==============
   Skript: /ringe-startseite.js. Branchen tragen das Akzent-Terrakotta, Designs die
   Tinte, damit die Seite bei einer Akzentfarbe bleibt. Bilder: img/ringe/ (600x375). */
/* Startwerte wie im Skript (Breite 22,8 % bzw. 55,2 % des Abschnitts, 180 bis 324 px), damit der
   Abschnitt beim Start der Ringe nicht in der Hoehe springt. */
#ringe { --ringe-cw: clamp(180px, 22.8vw, 324px); --ringe-ch: calc(var(--ringe-cw) * 0.625); position: relative; overflow: hidden; overflow: clip;
  isolation: isolate; }   /* die z-index-Werte der Karten (ab 1000) bleiben im Abschnitt, unter Kopfzeile und Handy-Leiste */
@media (max-width: 759px) { #ringe { --ringe-cw: clamp(180px, 55.2vw, 324px); } }
/* Keine verschachtelte 3D-Buehne: jede Karte traegt ihre ganze Lage selbst (perspective() im Skript),
   weil Safari die verschachtelte Variante flach drueckt und Rueckseiten gespiegelt zeigt. */
.ringe-buehne { position: relative; display: grid; place-items: center;
  height: calc(var(--ringe-ch) * 3 + 40px); min-height: 380px;
  margin-top: calc(var(--ringe-ch) * -0.45); }   /* oben war die Buehne zu luftig: Ringe naeher an die Ueberschrift */
.ringe-welt { position: relative; width: 0; height: 0; }
.ringe-platz { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ringe-marke { position: absolute; left: 0; z-index: 3000; display: inline-flex; align-items: center; gap: .5em; font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px; background: #FBF8F3; border: 1px solid #E5DFD5; color: #161512; }
.ringe-marke::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.ringe-marke--a { top: calc(50% - var(--ringe-ch) * 0.72 - 14px); } .ringe-marke--a::before { background: #A34E28; }
.ringe-marke--b { top: calc(50% + var(--ringe-ch) * 0.72 - 14px); } .ringe-marke--b::before { background: #161512; }
.ringe-ring { touch-action: pan-y; cursor: grab; list-style: none; margin: 0; padding: 0; position: absolute;
  left: calc(var(--ringe-cw) / -2); top: calc(var(--ringe-ch) / -2); width: var(--ringe-cw); height: var(--ringe-ch); }
.ringe-ring:active { cursor: grabbing; }
.ringe-karte { position: absolute; inset: 0; will-change: transform; }
.ringe-karte a { position: absolute; inset: 0; display: block; border-radius: 10px; overflow: hidden; background: #FBF8F3;
  box-shadow: 0 18px 34px -18px rgba(22,21,18,.5), 0 0 0 1.5px rgba(163,78,40,.45);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .45s ease; filter: saturate(.85) brightness(.97); }
.ringe-platz--b .ringe-karte a { box-shadow: 0 18px 34px -18px rgba(22,21,18,.5), 0 0 0 1.5px rgba(22,21,18,.35); }
.ringe-karte img { width: 100%; height: 100%; object-fit: cover; }
.ringe-karte.ist-vorn a { transform: scale(1.2); filter: none; box-shadow: 0 40px 70px -26px rgba(22,21,18,.6), 0 0 0 2px #A34E28; }
.ringe-karte.ist-gewaehlt a { transform: scale(1.34); filter: none; box-shadow: 0 46px 80px -28px rgba(22,21,18,.65), 0 0 0 3px #A34E28; }
.ringe-platz--b .ringe-karte.ist-vorn a { box-shadow: 0 40px 70px -26px rgba(22,21,18,.6), 0 0 0 2px #161512; }
.ringe-platz--b .ringe-karte.ist-gewaehlt a { box-shadow: 0 46px 80px -28px rgba(22,21,18,.65), 0 0 0 3px #161512; }
.ringe-karte.ist-gewaehlt::after { content: "✓"; position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%;
  background: #A34E28; color: #FBF8F3; font-size: 15px; line-height: 26px; text-align: center; transform: translate(calc(var(--ringe-cw) * .17), calc(var(--ringe-ch) * -.17)); z-index: 3; }
.ringe-platz--b .ringe-karte.ist-gewaehlt::after { background: #161512; }
.ringe-karte a:focus-visible { outline: 3px solid #161512; outline-offset: 4px; }
.ringe-titel { text-align: center; padding: 1.5rem 0 0; min-height: 8rem; position: relative; z-index: 3000; }
.ringe-titel__art { font-size: 13px; color: #6E6A60; margin: 0 0 .35rem; min-height: 1.2em; }
.ringe-titel__name { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; margin: 0; }
.ringe-titel__sub { color: #6E6A60; margin: .45rem 0 0; font-size: 15px; }
.ringe-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 1.1rem auto 0; max-width: 900px; }
.ringe-wahl > div { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: #FBF8F3;
  border: 1.5px solid #A34E28; font-size: 15px; }
.ringe-wahl > div[hidden] { display: none; }
#ringe-wahl-b { border-color: #161512; }
.ringe-wahl__art { font-size: 12px; color: #6E6A60; }
.ringe-wahl strong { font-weight: 600; }
.ringe-wahl__oeffnen { font-weight: 500; text-decoration: none; background: #161512; color: #F6F2EC; padding: 9px 16px; border-radius: 999px; font-size: 14px;
  min-height: 40px; display: inline-flex; align-items: center; }
.ringe-wahl__oeffnen:hover { background: #A34E28; }
.ringe-wahl__weg { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E5DFD5; background: transparent; color: #161512; cursor: pointer; font-size: 14px; }
.ringe-wahl__weg:hover { background: #161512; color: #F6F2EC; }
@media (max-width: 760px) {
  .ringe-karte.ist-vorn a { transform: scale(1.22); }
  .ringe-karte.ist-gewaehlt a { transform: scale(1.24); }
  .ringe-karte.ist-gewaehlt::after { transform: translate(calc(var(--ringe-cw) * .12), calc(var(--ringe-ch) * -.12)); }
  .ringe-marke { font-size: 12px; padding: 4px 9px; }
}
/* Ohne JavaScript und bei "Bewegung reduzieren": ruhiges Raster statt Buehne. */
html:not(.js):not(.js-an) .ringe-buehne, .ringe--ruhig .ringe-buehne { height: auto; min-height: 0; perspective: none; display: block; }
html:not(.js):not(.js-an) .ringe-welt, .ringe--ruhig .ringe-welt { width: auto; height: auto; transform: none !important; display: grid; gap: 28px; }
html:not(.js):not(.js-an) .ringe-platz, .ringe--ruhig .ringe-platz { position: static; width: auto; height: auto; transform: none !important; }
.ringe--ruhig .ringe-welt, .ringe--ruhig .ringe-platz, .ringe--ruhig .ringe-ring { width: 100%; }
.ringe--ruhig .ringe-marke { display: none; }
.ringe-ruhig-titel { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.75rem; line-height: 1.1; margin: 0 0 1rem; font-weight: 400; }
.ringe--ruhig .ringe-ring { position: static; width: auto; height: auto; transform: none !important; cursor: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ringe--ruhig .ringe-karte { position: relative; transform: none !important; aspect-ratio: 16 / 10; }
.ringe--ruhig .ringe-karte a { filter: none; }
.ringe-karte__name { position: absolute; left: 8px; bottom: 8px; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 999px; background: #FBF8F3; color: #161512; }
html:not(.js):not(.js-an) .ringe-titel, .ringe--ruhig .ringe-titel { display: none; }
html:not(.js):not(.js-an) .ringe-buehne { display: none; }
/* Ohne JavaScript gibt es keine Ringe, also auch keine Bedienungsanleitung dafuer; es bleibt der noscript-Absatz. */
html:not(.js):not(.js-an) #ringe-hinweis { display: none; }
#ringe-ende:focus { outline: none; }
/* Abstand Titel: die gewaehlte Karte ragt durch translateZ/scale ueber den Buehnenrand hinaus. */
.ringe-titel { padding-top: calc(var(--ringe-ch) * 0.9); }
@media (max-width: 760px) {
  .ringe-titel { padding-top: calc(var(--ringe-ch) * 0.75); }
  .ringe-wahl__art { display: none; }   /* die Randfarbe zeigt schon, welcher Ring */
}
.ringe-wahl__oeffnen { white-space: nowrap; }
.ringe-wahl strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ringe-wahl > div { max-width: 100%; }

/* Unter der Auswahl: Weg zur passenden Branchenseite (Text aus ringe-startseite.js). */
.ringe-wahl__seite { flex-basis: 100%; text-align: center; margin: 2px 0 0; font-size: 15px; }
.ringe-wahl__seite[hidden] { display: none; }
.ringe-wahl__seite a { color: #161512; text-decoration: underline; text-decoration-color: #C2643A; text-underline-offset: 4px; }
.ringe-wahl__seite a:hover { color: #A34E28; }

/* Handy: Name und Untertitel ueber der Auswahl behalten ihre Hoehe. Beim Antippen von ✕ oder
   "Vorschau oeffnen" verlor die Karte den Fokus, der Untertitel wurde leer und die Auswahlzeile
   sprang 56 px nach oben, bevor der Tipp ankam (gemessen bei 390 px). Lange Namen umbrechen statt
   abschneiden. */
@media (max-width: 760px) {
  .ringe-titel__name { min-height: 2.1em; display: flex; align-items: flex-end; justify-content: center; }
  .ringe-titel__sub { min-height: 3em; line-height: 1.5; }
  .ringe-wahl strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ringe-wahl > div { border-radius: 26px; }
}