/* Corovic Zahnmedizin – statische Fassung (ohne Cargo), Stand 1.11.2026.
   Werte aus dem Cargo-Stylesheet der Website übernommen und am Original nachgemessen.
   Cargos Klasse ".mobile" (Hochformat-Fenster) ist hier die Media-Query (max-aspect-ratio: 4/5). */

/* Schrift: SUSE (SIL Open Font License, selbst gehostet) als Ersatz für »Arizona Sans Variable« (Dinamo),
   die Cargo nur für Cargo-Seiten lizenziert. Auswahl 1.11.2026 aus über 100 freien Schriften:
   gleiche x-Höhe (0,687 zu 0,676 der Versalhöhe), gleiche Laufweite (100,2 %), ähnlich weiche Formen.
   size-adjust 98,3 %: gleiche Laufweite wie Arizona Sans in den benutzten Stärken (nachgemessen an Fließtext, Überschrift, Claim und Menü; Versalhöhe damit 1 % kleiner). */
@font-face {
  font-family: "SUSE";
  src: url("/assets/fonts/SUSE-latin.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap; size-adjust: 98.3%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "SUSE";
  src: url("/assets/fonts/SUSE-latin-ext.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap; size-adjust: 98.3%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --schrift: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Strichstärken wie Arizona Sans (Cargo-Angabe → SUSE), gemessen 1.11.2026 */
  --w200: 175; --w300: 300; --w400: 385; --w500: 495; --w700: 600;
  --gruen: #29997e;
  --text: #444444;
  --viewport-height: 100vh;
  --pad: 1rem;              /* Innenabstand der Seiten (Cargo .page-content) */
  --mfaktor: 1.5;           /* Cargo --mobile-padding-offset: Ränder und Spaltenabstände im Hochformat × 1,5 */
}

/* Grundgröße wie Cargo: wächst mit dem Fenster (an über 25 Fenstergrößen nachgemessen, 1.11.2026).
   Cargo schaltet auf »mobile«, sobald das Fenster schmaler ist als 4:5 (Breite : Höhe < 0,8) – hier die Media-Query.
   Querformat: 1,44 % der Fensterhöhe, höchstens 0,4117 % der Breite + 1,0283 % der Höhe.
   »mobile«: 3,135 % der Breite, höchstens 0,576 % der Breite + 1,44 % der Höhe.
   Cargo rechnet mit der Breite ohne Scrollbalken – das setzt ein kleines Skript im Kopf jeder Seite genau so;
   diese Zeilen gelten, falls es nicht läuft. */
html { font-size: min(1.44vh, calc(.4117vw + 1.0283vh)); -webkit-text-size-adjust: 100%; }
@media (max-aspect-ratio: 4/5) { html { font-size: min(3.135vw, calc(.576vw + 1.44vh)); } :root { --pad: 1.5rem; } }

* { box-sizing: border-box; }
body { margin: 0; background-color: #fcfcfc; }
img { max-width: 100%; }

/* Seitenaufbau wie Cargo: Kopf und Fuß liegen als Ebenen über dem Inhalt */
.rahmen { position: relative; min-height: var(--viewport-height); }
.page { display: flex; justify-content: center; width: 100%; }
.page-layout { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; padding: 0; }
.page-content { width: 100%; padding: var(--pad); text-align: left; }
.kopf-d { position: fixed; top: 0; left: 0; right: 0; z-index: 399; }
.kopf-m { position: absolute; top: 0; left: 0; right: 0; z-index: 399; display: none; }
.kopf, .fuss { pointer-events: none; }
.kopf a, .kopf figure, .fuss a { pointer-events: auto; }
.fuss { position: absolute; left: 0; right: 0; bottom: 0; z-index: 398; }
@media (max-aspect-ratio: 4/5) { .kopf-d { display: none; } .kopf-m { display: flex; } }

/* Grundtext (Cargo »bodycopy«) */
.page-content { font-family: var(--schrift); font-size: 1.25rem; font-weight: var(--w400); color: var(--text);
  font-style: normal; line-height: 1.25; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; }
.page-content a { color: var(--text); text-decoration: none; }
a:active, .linked:active { opacity: .7; }
.page .page-content a.active { color: var(--gruen); }
b, strong { font-weight: var(--w700); }
sub { position: relative; vertical-align: baseline; top: .3em; }
sup { position: relative; vertical-align: baseline; top: -.4em; }
ol { margin: 0; padding: 0 0 0 2.5em; }
ul { margin: 0; padding: 0 0 0 2em; }
blockquote { margin: 0; padding: 0 0 0 2em; }
hr { background: #ae4747; border: 0; height: 10%; display: block; margin-top: 1rem; margin-bottom: 1rem; }

/* Textstile aus Cargo */
h1 { font-family: var(--schrift); font-style: normal; font-weight: var(--w300); margin: 0; font-size: 3rem; line-height: 1.35;
  color: var(--gruen); letter-spacing: -0.007em; }
h2 { font-family: var(--schrift); font-style: normal; font-weight: var(--w300); margin: 0; font-size: 3rem; line-height: 1.35;
  color: var(--gruen); letter-spacing: -0.007em; }
.page-content h1 a, .page-content h2 a { color: var(--gruen); text-decoration: none; }
@media (max-aspect-ratio: 4/5) { h1 { font-size: 4.6rem; } h2 { font-size: 2.25rem; } }
.caption { font-size: 1.25rem; font-weight: var(--w500); color: var(--gruen); line-height: 1.25; letter-spacing: 0; display: block; }
.page-content .caption a { color: var(--gruen); }
.button { font-size: 1.25rem; font-weight: var(--w700); color: #fff; line-height: 1.25; letter-spacing: .174em; display: block; }
.page-content .button a { color: #fff; }
.menu-points { font-size: 1.25rem; font-weight: var(--w500); color: var(--text); line-height: 1.25; letter-spacing: .129em; display: block; }
.page-content .menu-points a, .page-content a.menu-points { color: var(--text); text-decoration: none; }
.page a.menu-points.active, .page .menu-points a.active { color: var(--gruen); }
.heading-3 { font-size: 1.5rem; font-weight: var(--w400); color: var(--text); line-height: 1.25; letter-spacing: -0.02em; margin: 0; }
.page-content .heading-3 a { color: var(--text); }
.heading-3-auf-gruen { font-size: 1.55rem; font-weight: var(--w500); color: #fff; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.page-content .heading-3-auf-gruen a { color: #fff; }
.bodycopy-link { font-size: 1.25rem; font-weight: var(--w400); color: var(--text); line-height: 1.25; letter-spacing: -0.022em; display: block; }
.page-content .bodycopy-link a, .page-content a.bodycopy-link { color: var(--text); text-decoration: underline; }
.bodycopy-fett { font-size: 1.35rem; font-weight: var(--w500); color: var(--gruen); line-height: 1.25; letter-spacing: 0; display: block; }
.page-content .bodycopy-fett a { color: var(--gruen); }
.claim { font-size: 6rem; font-weight: var(--w200); color: var(--text); line-height: 1; letter-spacing: -0.029em; display: block; }
.page-content .claim a { color: var(--text); }
.small-caps { font-variant: small-caps; text-transform: lowercase; }
/* »Termine«-Knopf: in Cargo als Inline-Stil mit font-weight 700 – auf die SUSE-Stärke umgerechnet */
.termine-button, .kinder-button { font-weight: var(--w700) !important; }

/* Spalten (Cargo column-set / column-unit, 12er-Raster; Abstand = gutter, Standard 1rem) */
.cs { display: flex; align-items: stretch; width: 100%; gap: var(--g, 1rem); }
.cu { flex: 0 0 calc(var(--span) / 12 * (100% + var(--g, 1rem)) - var(--g, 1rem)); min-width: 0; }
/* Cargo: folgt ein Spaltenblock direkt auf einen anderen, steht darüber sein eigener Spaltenabstand (gutter)
   – nachgemessen 1.11.2026: Standard 1rem, bei gutter 0rem kein Abstand */
.cs + .cs { margin-top: var(--g, 1rem); }
@media (max-aspect-ratio: 4/5) {
  .cs { gap: calc(var(--mg, 1rem) * var(--mfaktor)); }
  .cs + .cs { margin-top: calc(var(--mg, 1rem) * var(--mfaktor)); }
  .cu { flex-basis: calc(var(--span) / 12 * (100% + var(--mg, 1rem) * var(--mfaktor)) - var(--mg, 1rem) * var(--mfaktor)); }
  .cs:not(.nostack) { flex-direction: column; }
  .cs:not(.nostack) > .cu { flex: none; width: 100%; }
  .cs:not(.nostack) > .cu:empty { display: none; }
}

/* Bilder (Cargo media-item) */
/* Cargo rechnet »scale« (z. B. 11 %) von der Breite der Spalte bzw. Seite, nicht vom direkten Elternelement
   (nachgemessen: Symbol in einer Tabellenzelle mit 11 % = 77 px bei 702 px Spaltenbreite). Daher Container-Einheiten. */
.cu, .page-content { container-type: inline-size; }
.mi { display: inline-block; vertical-align: top; margin: 0; width: calc(var(--s, 100) * 1cqw); max-width: 100%; position: relative; line-height: 0; }
.mi img { display: block; width: 100%; height: auto; }
.mi > a { display: block; }
/* Cargo-Standard: weicher Schatten unter jedem Bild, außer wo er im Bild abgeschaltet ist */
.mi:not(.ohne-schatten) img { filter: drop-shadow(.3rem .3rem .3rem rgba(0, 0, 0, .2)); }

/* Hochformat: Zuschnitte aus dem Cargo-CSS (Klassen »hoch«, »hero-quer«, »icon-wrap«) */
@media (max-aspect-ratio: 4/5) {
  .mi.hoch img { aspect-ratio: 10 / 7; width: 100%; height: auto; object-fit: cover; object-position: 50% 40%; }
  .mi.hero-quer img { aspect-ratio: 10 / 7; width: 100%; height: auto; object-fit: cover; object-position: 50% 50%; }
  .icon-wrap { max-width: 6rem; margin-left: auto; margin-right: auto; margin-bottom: -.5rem; }
  .icon-wrap .mi { width: 100% !important; }
  .icon-wrap .mi img { aspect-ratio: 1; object-fit: contain; }
}

/* Startseite: zwei Diashows – Querformat-Fenster zeigt die Querformate, Hochformat die Hochformate */
.hero-mobil { display: none; }
@media (max-aspect-ratio: 4/5) { .hero-desktop { display: none; } .hero-mobil { display: block; } }

/* Diashow (Cargo gallery-slideshow): so hoch wie das höchste Bild, Bilder oben/mittig/unten (vertical-align) */
.g-slides { position: relative; width: 100%; display: grid; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.g-slides > .mi { width: 100%; grid-area: 1 / 1; align-self: var(--va, center); }
.g-slides img { -webkit-user-drag: none; }
.g-slides.blenden > .mi { opacity: 0; transition: opacity var(--dauer, 1s) cubic-bezier(.24, 0, .29, 1); }
.g-slides.blenden > .mi.aktiv { opacity: 1; z-index: 1; }
.g-slides.schieben { overflow: hidden; }
.g-slides.schieben > .mi { transform: translateX(100%); transition: transform var(--dauer, .8s) cubic-bezier(.445, .05, .55, .95); }
.g-slides.schieben > .mi.aktiv { transform: none; }
.g-slides > .mi.still { transition: none !important; }
.g-slides:not(.blenden):not(.schieben) > .mi:not(:first-child) { visibility: hidden; }
/* Pfeile wie Cargo: 30 px, Kreis rgba(87,87,87,.35), 15 px vom Rand (im Hochformat 10 px) */
.g-slides .nav { position: absolute; top: 50%; z-index: 2; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%;
  background: rgba(87, 87, 87, .35); color: rgba(255, 255, 255, .9); cursor: pointer; padding: 0; display: none; }
.g-slides .nav svg { display: block; width: 100%; height: 100%; }
.g-slides .nav.zurueck { left: 15px; } .g-slides .nav.vor { right: 15px; }
.g-slides[data-nav="1"] .nav { display: block; }
@media (max-aspect-ratio: 4/5) {
  .g-slides .nav { display: none; }
  .g-slides[data-mnav="1"] .nav { display: block; }
  .g-slides .nav.zurueck { left: 10px; } .g-slides .nav.vor { right: 10px; }
}

/* Zwischentitel und Absätze wie Cargo (nachgemessen im Impressum): Textgröße, fett, Abstand 1em bzw. 1,33em */
h3 { font-size: 1em; font-weight: var(--w700); margin: 1em 0; }
h4 { font-size: 1em; font-weight: var(--w700); margin: 1.33em 0; }
p { margin: 1em 0; }

/* Bildunterschrift (Cargo: media-item .caption, 1em Abstand zum Bild) */
.mi figcaption.caption { margin-top: 1em; line-height: 1.25; }
/* Cargo blendet die Pfeile erst ein, wenn die Maus bzw. der Finger auf der Diashow ist (nachgemessen: Deckkraft 0 im Ruhezustand) */
.g-slides .nav { opacity: 0; transition: opacity .2s ease; }
.g-slides:hover .nav, .g-slides:focus-within .nav { opacity: 1; }