/* Zahnmedizin Figge · Landingpage · Version 0.1 (Vorschau)
   Layout: 12-Spalten-Raster, 24 px Steg, Außenrand 16–80 px. Jede Fläche steht für ein Material
   (Putz, Leinen, Schiefer, Messing, Holz) – Texturen liegen als Kacheln in assets/img. */

@font-face { font-family: "Jost"; src: url("../fonts/jost-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --putz: #F4F1EB;
  --leinen: #E7E1D8;
  --schiefer-nacht: #2B2F35;
  --schiefer: #6F767A;
  --gruen: #4F6B5B;
  --holz: #8C6A4A;
  --messing: #B9985E;
  --messing-hell: #C9AC74;
  --hell: #F4F1EB;          /* Schrift auf dunklen Flächen */
  --hell-2: #C5CACD;        /* Nebentext auf Schiefer */
  --gruen-hell: #D7DED8;    /* Nebentext auf Grün */
  --linie: #D9D3C9;
  --linie-leinen: #D4CDC2;
  --linie-dunkel: rgba(244, 241, 235, 0.22);
  --linie-gruen: #7E948A;

  --font: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5.6vw, 80px);
  --gap: 24px;
  --section-y: clamp(64px, 8.3vw, 120px);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  color: var(--schiefer-nacht);
  background-color: var(--putz);
  background-image: url("../img/putz.webp");
  background-size: 512px 512px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gruen); }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

/* ---------- Material ---------- */
.tx-leinen { background-color: var(--leinen); background-image: url("../img/leinen.webp"); background-size: 512px 512px; }
.tx-schiefer {
  background-color: var(--schiefer-nacht);
  background-image: linear-gradient(180deg, rgba(43,47,53,0) 0%, rgba(14,16,19,0.38) 100%), url("../img/schiefer-foto.webp");
  background-size: cover; background-position: center 40%;
  color: var(--hell);
}
.tx-messing { background-color: var(--messing); background-image: url("../img/messing.webp"); background-size: 1024px 100%; }
.kante { position: relative; }
.kante::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--messing) url("../img/messing.webp") 0 0 / 1024px 100%; z-index: 2; }
.kante::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: rgba(244,241,235,0.12); z-index: 2; }
.frame-messing { border: 2px solid var(--messing); border-image: url("../img/messing.webp") 8 round; }
.line-messing-y { border-top: 2px solid var(--messing); border-bottom: 2px solid var(--messing); border-image: url("../img/messing.webp") 8 0 round; }
.line-messing-t { border-top: 2px solid var(--messing); border-image: url("../img/messing.webp") 8 0 0 0 round; }

/* ---------- Typografie ---------- */
.ueberzeile { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--schiefer); }
.h2 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.15; letter-spacing: 0.14em; text-transform: uppercase; }
.h3 { font-weight: 500; font-size: 22px; line-height: 1.3; }
.lead { font-size: 18px; line-height: 1.55; }
.klein { font-size: 14px; line-height: 1.5; color: var(--schiefer); }
.nowrap { white-space: nowrap; }
.on-dark .ueberzeile, .on-dark .klein { color: var(--hell-2); }
.on-dark, .on-dark a { color: var(--hell); }

.btn {
  display: inline-block; padding: 16px 28px; background: var(--gruen); color: var(--hell);
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; border: 0; cursor: pointer;
  transition: background-color .2s ease;
}
.btn:hover { background: #435c4e; color: var(--hell); }
.btn-hell { background: var(--putz); color: var(--schiefer-nacht); }
.btn-hell:hover { background: #fff; color: var(--schiefer-nacht); }
.textlink {
  display: inline-block; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.on-dark .textlink { color: var(--hell); }

/* ---------- Raster ---------- */
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.section { padding-block: var(--section-y); }

/* ---------- Header ---------- */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background-color: var(--putz); background-image: url("../img/putz.webp"); background-size: 512px 512px; }
.header .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header .strich { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.wortmarke { font-size: 18px; letter-spacing: 0.28em; text-transform: uppercase; white-space: nowrap; }
.nav { display: flex; gap: 40px; align-items: center; }
.nav a { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--schiefer-nacht); }
@media (max-width: 900px) {
  .header .wrap { height: 64px; }
  .wortmarke { font-size: 14px; }
  .menu-btn { display: flex; }
  .nav { position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px var(--gutter) 20px; background-color: var(--putz); background-image: url("../img/putz.webp"); background-size: 512px 512px; border-bottom: 2px solid var(--messing); display: none; }
  .nav.offen { display: flex; }
  .nav a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--linie); }
  .nav a:last-child { border-bottom: 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; height: min(860px, 92vh); min-height: 620px; }
.hero-foto { position: absolute; top: 0; right: 0; width: 52%; height: 100%; }
.hero-foto img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 22%; will-change: transform; }
.schild {
  position: absolute; left: calc(var(--gutter) + 40px); top: 50%; transform: translateY(-50%);
  width: min(660px, 50%); padding: 52px; background: var(--putz);
  display: flex; flex-direction: column; gap: 22px; z-index: 1;
}
.schild h1 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; letter-spacing: 0.16em; text-transform: uppercase; }
.schild p.lead { font-size: 17px; max-width: 460px; }
.schild .aktionen { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero-foto { position: static; width: 100%; height: 60vh; min-height: 420px; }
  .hero-foto img { height: 100%; object-position: 55% 18%; }
  .schild { position: static; transform: none; width: auto; margin: -72px var(--gutter) 40px; padding: 32px 28px; gap: 18px; }
  .schild .aktionen { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ---------- Eröffnungsband ---------- */
.band { height: 160px; display: grid; align-content: center; }
.band .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 4px; }
.band .zelle { display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--linie-dunkel); padding-left: 24px; }
.band .wert { font-size: 20px; line-height: 1.4; }
@media (max-width: 900px) {
  .band { height: auto; padding-block: 36px; }
  .band .grid { grid-template-columns: 1fr; row-gap: 24px; }
  .band .wert { font-size: 18px; }
}

/* ---------- Über mich ---------- */
.ueber .grid { align-items: stretch; }
.ueber .links { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 24px; }
.ueber .links img { width: 100%; flex: 1 1 0; min-height: 520px; margin-top: var(--section-y); object-fit: cover; object-position: 62% 40%; }
.ueber .rechts { grid-column: 7 / span 6; padding-block: var(--section-y); display: flex; flex-direction: column; gap: 24px; }
.zitat { margin: 0; padding: 32px 36px; display: flex; flex-direction: column; gap: 12px; }
.zitat p:first-child { font-size: 22px; line-height: 1.4; font-style: italic; font-weight: 300; }
.mitglied { margin-bottom: var(--section-y); display: flex; flex-direction: column; gap: 6px; }
.mitglied .ueberzeile { font-size: 11px; }
@media (max-width: 900px) {
  .ueber .links, .ueber .rechts { grid-column: 1 / -1; }
  .ueber .rechts { padding-block: 40px 0; order: 1; }
  .ueber .links { order: 2; padding-bottom: var(--section-y); }
  .ueber .links img { flex: none; min-height: 0; aspect-ratio: 4 / 3; margin-top: 8px; object-position: 62% 40%; }
  .mitglied { margin-bottom: 0; }
}

/* ---------- Praxis ---------- */
.praxis .intro { align-items: end; row-gap: 24px; margin-bottom: 64px; }
.praxis .trenner { display: none; height: 2px; margin-bottom: 40px; }
.praxis .intro .titel { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 16px; }
.praxis .intro .lead { grid-column: 8 / span 5; }
.praxis .ebenen { grid-template-rows: auto auto; align-items: start; }
.praxis .streifen { grid-column: 1 / -1; grid-row: 1; width: 100%; height: clamp(220px, 32vw, 460px); object-fit: cover; object-position: center 60%; }
.haltung { grid-column: 1 / span 5; grid-row: 2; position: relative; z-index: 1; margin-top: -48px; padding: 48px; display: flex; flex-direction: column; }
.haltung .ueberzeile { margin-bottom: 28px; }
.haltung .punkt { display: flex; flex-direction: column; gap: 12px; padding-block: 28px; border-bottom: 1px solid var(--linie-dunkel); }
.haltung .punkt:first-of-type { padding-top: 0; }
.haltung .punkt:last-of-type { padding-bottom: 0; border-bottom: 0; }
.haltung .nr { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--messing-hell); }
.haltung .satz { font-weight: 500; font-size: 20px; line-height: 1.3; }
.haltung .txt { font-size: 16px; }
.leistungen { grid-column: 7 / span 6; grid-row: 2; padding-top: 64px; display: flex; flex-direction: column; }
.leistungen .ueberzeile { margin-bottom: 20px; }
.leistungen .zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--linie); }
.leistungen .zeile:first-of-type { border-top: 1px solid var(--schiefer-nacht); }
.leistungen .zeile:last-of-type { border-bottom: 1px solid var(--schiefer-nacht); }
.leistungen .name { font-weight: 500; font-size: 18px; line-height: 1.4; }
.leistungen .was { font-size: 16px; color: var(--schiefer); }
.leistungen .klein { margin-top: 20px; }
@media (max-width: 900px) {
  .praxis { padding-top: 0; }
  .praxis .trenner { display: block; }
  .praxis .intro { margin-bottom: 40px; }
  .praxis .intro .titel, .praxis .intro .lead { grid-column: 1 / -1; }
  .haltung { grid-column: 1 / -1; margin-top: -24px; padding: 32px 24px; }
  .leistungen { grid-column: 1 / -1; grid-row: 3; padding-top: 48px; }
  .leistungen .zeile { grid-template-columns: 1fr; row-gap: 4px; padding-block: 16px; }
}

/* ---------- Umbau-Tagebuch ---------- */
.tagebuch { background: var(--holz); }
.tagebuch .kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.tagebuch .kopf .ueberzeile { color: var(--leinen); }
.tagebuch .kopf .h2 { color: var(--hell); margin-top: 16px; }
.teaser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.teaser article { display: flex; flex-direction: column; gap: 16px; min-width: 0; height: 100%; }
.teaser article > p:not(.ueberzeile) { flex: 1 1 auto; }
.teaser article > .textlink { margin-top: auto; align-self: flex-start; }
.teaser img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.teaser .datum { color: var(--leinen); }
.teaser p { font-size: 16px; }
@media (max-width: 900px) {
  .tagebuch .kopf { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .teaser { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Team ---------- */
.team .grid { align-items: start; }
.team .foto { grid-column: 1 / span 4; width: 100%; height: 620px; object-fit: cover; object-position: 50% 20%; }
.team .inhalt { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 24px; }
.team .lead { max-width: 620px; }
.stellen { margin-top: 12px; }
.stellen .zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--linie-leinen); }
.stellen .zeile:first-child { border-top: 1px solid var(--schiefer-nacht); }
.stellen .zeile:last-child { border-bottom: 1px solid var(--schiefer-nacht); }
.stellen .name { font-weight: 500; font-size: 18px; line-height: 1.4; }
.stellen .was { font-size: 16px; color: var(--schiefer); }
.team .aktion { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 900px) {
  .team .foto { grid-column: 1 / -1; height: auto; aspect-ratio: 4 / 5; max-height: 480px; margin-bottom: 32px; }
  .team .inhalt { grid-column: 1 / -1; }
  .stellen .zeile { grid-template-columns: 1fr; row-gap: 4px; padding-block: 16px; }
}

/* ---------- Newsletter & Social ---------- */
.newsletter { background: var(--gruen); color: var(--hell); }
.newsletter .ueberzeile { color: var(--gruen-hell); }
.newsletter .grid { align-items: start; row-gap: 48px; }
.newsletter .links { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 24px; }
.newsletter .rechts { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 24px; border-left: 1px solid var(--linie-gruen); padding-left: 40px; }
.newsletter form { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; max-width: 560px; }
.newsletter .honig { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.newsletter label.feld { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gruen-hell); }
.newsletter .reihe { display: flex; }
.newsletter input[type="email"] { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 20px; background: var(--leinen); border: 0; color: var(--schiefer-nacht); }
.newsletter input[type="email"]::placeholder { color: var(--schiefer); }
.newsletter .btn-hell { height: 56px; padding-block: 0; }
.newsletter .einwilligung { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.newsletter .einwilligung input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--schiefer-nacht); }
.newsletter .einwilligung a { border-bottom: 1px solid currentColor; }
.newsletter .hinweis { font-size: 14px; color: var(--gruen-hell); min-height: 1.5em; }
.social a { display: flex; align-items: center; gap: 18px; padding-block: 16px; border-bottom: 1px solid var(--linie-gruen); }
.social a:first-child { border-top: 1px solid var(--linie-gruen); }
.social .kreis { width: 40px; height: 40px; border: 1.5px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 11px; letter-spacing: 0.12em; flex: 0 0 auto; }
.social .wort { font-weight: 500; font-size: 18px; }
.newsletter a:hover { color: var(--leinen); }
@media (max-width: 900px) {
  .newsletter .links, .newsletter .rechts { grid-column: 1 / -1; }
  .newsletter .rechts { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie-gruen); padding-top: 40px; }
  .newsletter .reihe { flex-direction: column; gap: 12px; }
}

/* ---------- Kontakt ---------- */
.kontakt { padding-block: clamp(56px, 6.7vw, 96px); }
.kontakt .grid { align-items: center; row-gap: 40px; }
.kontakt .haus { grid-column: 1 / span 4; width: 100%; max-height: 360px; object-fit: contain; }
.kontakt .schild-k { grid-column: 5 / span 8; padding: 40px 48px; background: var(--putz); display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 40px; align-items: center; }
.kontakt .laterne { height: 240px; width: auto; justify-self: center; }
.kontakt .inhalt { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kontakt .inhalt .h2 { font-size: clamp(24px, 2.1vw, 30px); margin-top: 10px; }
.kontakt .daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 14px; align-items: start; }
.kontakt .daten a { display: inline-block; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.kontakt .daten .mail { font-size: 18px; word-break: break-all; }
.kontakt .daten .stapel { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (max-width: 900px) {
  .kontakt .haus { grid-column: 1 / -1; max-height: 260px; }
  .kontakt .schild-k { grid-column: 1 / -1; grid-template-columns: 1fr; padding: 28px 24px; row-gap: 24px; }
  .kontakt .laterne { display: none; }
  .kontakt .daten { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.footer { padding-block: 76px 68px; }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer .wortmarke { font-size: 18px; }
.footer nav { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.footer nav a, .footer nav p { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hell-2); }
.footer nav p { letter-spacing: 0.08em; text-transform: none; }
.footer nav a:hover { color: var(--hell); }
@media (max-width: 900px) { .footer { padding-block: 48px 40px; } .footer .wrap { flex-direction: column; align-items: flex-start; gap: 24px; } }

/* ---------- Unterseiten ---------- */
.unterseite { padding-block: var(--section-y); }
.unterseite .text { grid-column: 3 / span 7; display: flex; flex-direction: column; gap: 40px; }
.unterseite .block { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--linie); padding-top: 24px; }
.unterseite .block:first-of-type { border-top-color: var(--schiefer-nacht); }
.unterseite .block h2 { font-weight: 500; font-size: 18px; line-height: 1.4; }
.unterseite .block p { font-size: 17px; line-height: 1.6; }
@media (max-width: 900px) { .unterseite .text { grid-column: 1 / -1; } }

/* ---------- Bewegung (nur mit JS und ohne „Bewegung reduzieren“) ---------- */
.js .pre { opacity: 0; transform: translateY(12px); }
.js .in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.js .pre-draw::before { transform: scaleX(0); transform-origin: left; }
.js .in-draw::before { transform: scaleX(1); transition: transform .7s ease; }
@media (prefers-reduced-motion: reduce) { .js .pre, .js .pre-draw::before { opacity: 1; transform: none; } }

/* ---------- Tagebuch: Übersicht und Eintrag ---------- */
.tagebuch-liste, .eintrag { padding-block: clamp(56px, 6.7vw, 96px) var(--section-y); }
.tagebuch-liste .kopf { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: 56px; }
.teaser.hell { color: var(--schiefer-nacht); }
.teaser.hell .datum { color: var(--schiefer); }
.teaser.hell .klein { color: var(--schiefer); }
.teaser.hell a:hover { color: var(--gruen); }
.tagebuch .teaser .hell-2 { color: var(--leinen); }
.eintrag .kopf { align-items: start; row-gap: 40px; }
.eintrag .titel { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 20px; }
.eintrag .zurueck { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--schiefer); align-self: flex-start; }
.eintrag h1.h2 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: 0.1em; }
.eintrag .vorspann { font-size: 20px; line-height: 1.5; font-weight: 300; }
.eintrag .hauptbild { grid-column: 9 / span 4; grid-row: 1 / span 2; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.eintrag .hauptbild img { width: 100%; }
.eintrag .hauptbild.hochformat img { max-width: 360px; }
.eintrag .hauptbild.quer { grid-column: 1 / -1; grid-row: 2; }
.eintrag .hauptbild.quer ~ .text { grid-row: 3; }
.eintrag .hauptbild.quer img { aspect-ratio: 3 / 2; object-fit: cover; }
.eintrag .text { grid-column: 1 / span 7; grid-row: 2; display: flex; flex-direction: column; gap: 24px; }
.eintrag .cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--linie); }
.eintrag .weitere { margin-top: var(--section-y); padding-top: 48px; border-top: 1px solid var(--schiefer-nacht); display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 900px) {
  .tagebuch-liste .kopf { margin-bottom: 40px; }
  .eintrag .titel, .eintrag .hauptbild, .eintrag .text { grid-column: 1 / -1; grid-row: auto; }
  .eintrag .hauptbild.hochformat img { max-width: 280px; }
}