/* Schwan Dental – schlichte Homepage (Entwurf 11.11.2026). Keine Cookies, keine externen Dienste. */
@font-face { font-family: "SSans"; src: url("SourceSans3-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "SSans"; src: url("SourceSans3-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SSans"; src: url("SourceSans3-Semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --dunkel: #24272B;
  --grau: #6E737A;
  --hell: #E3E4E6;
  --gold: #B8955A;
  --flaeche: #F5F5F4;
  --weiss: #FFFFFF;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "SSans", "Source Sans 3", Arial, sans-serif; font-weight: 300; color: var(--dunkel);
       background: var(--weiss); line-height: 1.6; font-size: 18px; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold); }
a:hover { color: var(--gold); }
.breite { max-width: 980px; margin: 0 auto; padding: 0 24px; }

/* Kopf */
header { border-bottom: 1px solid var(--hell); }
header .breite { display: flex; align-items: center; justify-content: space-between; height: 84px; }
header .logo { border: 0; display: block; }
header .logo img { height: 26px; display: block; }
header nav a { border: 0; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--grau); margin-left: 28px; }
header nav a:hover { color: var(--gold); }

/* Einstieg */
.held { position: relative; overflow: hidden; padding: 110px 0 120px; }
.held .breite { position: relative; }
/* Zahn ganz sichtbar rechts neben der Überschrift (Nutzer: abgeschnitten wirkte unrund) */
.held .wz { position: absolute; right: 24px; top: 0; height: 250px; opacity: .08; pointer-events: none; }
.held .ueber { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.held h1 { font-weight: 300; font-size: 50px; line-height: 1.14; margin: 0 0 24px; max-width: 700px; text-wrap: balance; }
.held p { font-size: 20px; color: var(--grau); margin: 0; white-space: nowrap; position: relative; }  /* eine Zeile (Nutzer) */
.held p .zus { white-space: nowrap; }
@media (max-width: 980px) { .held p, .held p .zus { white-space: normal; } }
/* gleichmäßige Zeilenumbrüche: Überschriften ausgewogen, Fließtext ohne einzelne Wörter in der letzten Zeile */
h1, h2, h3, .titel { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Blocksatz mit Silbentrennung für Fließtext (Nutzer 11.11.2026); Überschriften und Listen bleiben linksbündig */
.zwei p, .recht p { text-align: justify; hyphens: manual; -webkit-hyphens: manual; text-wrap: wrap; }
/* Kachel-Texte bleiben linksbündig: bei nur drei kurzen Zeilen reißt Blocksatz große Lücken (getestet) */

/* Abschnitte */
section { padding: 90px 0; }
section.grau { background: var(--flaeche); }
h2 { font-weight: 400; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.titel { font-weight: 300; font-size: 36px; line-height: 1.2; margin: 0 0 40px; }

/* Subgrid: Nummer, Überschrift, Text und Liste beider Kacheln stehen auf gleicher Höhe (Nutzer 11.11.2026) */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 28px; }
.kachel { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start;
          background: var(--weiss); border: 1px solid var(--hell); border-radius: 4px; padding: 36px 34px; }
.kachel .nr { font-size: 13px; letter-spacing: 2px; color: var(--gold); }
.kachel h3 { font-weight: 400; font-size: 26px; margin: 6px 0 14px; }
.kachel p { margin: 0 0 18px; color: var(--grau); }
.kachel ul { margin: 0; padding: 0; list-style: none; align-self: start; }
.kachel li { padding: 8px 0 8px 22px; border-top: 1px solid var(--hell); position: relative; font-size: 16px; }
.kachel li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 50%;
                     border: 1px solid var(--gold); }

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.zwei h3 { font-weight: 400; font-size: 22px; margin: 0 0 10px; }
.zwei p { margin: 0; color: var(--grau); }

.kontakt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.kontakt div { border-top: 1px solid var(--dunkel); padding-top: 16px; }
.kontakt small { display: block; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--grau); margin-bottom: 6px; }
.kontakt b { font-weight: 400; font-size: 21px; }
.kontakt b a { border: 0; }
.hinweis { margin-top: 36px; font-size: 16px; color: var(--grau); }

/* Rechtstexte */
.recht { padding: 70px 0 90px; }
.recht h1 { font-weight: 300; font-size: 40px; margin: 0 0 36px; }
.recht h2 { margin-top: 40px; }
.recht p, .recht li { max-width: 720px; }
.recht p { margin: 0 0 14px; }

/* Fuß */
footer { border-top: 1px solid var(--hell); padding: 30px 0 40px; font-size: 14px; color: var(--grau); }
footer .breite { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer a { border: 0; margin-left: 22px; }
footer a:first-child { margin-left: 0; }

/* Handy */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .breite { padding: 0 16px; }
  header .breite { height: 68px; }
  header .logo img { height: 20px; }
  header nav a { margin-left: 16px; font-size: 12px; letter-spacing: 1px; }
  header nav a.weg { display: none; }
  header .logo img { height: 24px; }
  /* Handy: kein Zahn – hinter der Überschrift unruhig, darüber doppelt zum Logo (Nutzer 12.11.2026) */
  .held { padding: 56px 0 64px; }
  .held .wz { display: none; }
  .held h1 { font-size: 31px; line-height: 1.18; }
  .held p { font-size: 18px; }
  section { padding: 60px 0; }
  .titel { font-size: 28px; margin-bottom: 28px; }
  .kacheln, .zwei, .kontakt { grid-template-columns: 1fr; gap: 22px; }
  .kacheln { grid-template-rows: none; }
  .kachel { display: block; }
  .zwei p, .recht p { text-align: left; }  /* auf dem Handy kein Blocksatz – zu schmal */
  .kachel { padding: 28px 22px; }
  .recht h1 { font-size: 32px; }
  footer a { margin-left: 0; margin-right: 18px; }
}