/* ===================================================================
   CamelidenHof — Abschiedsseite
   Gleiche Gestaltungssprache wie michaela-molzahn.de (WandlungsPunkte),
   damit der Weg von hier zur Praxis sichtbar zusammengehoert.
   Kundenwunsch 28.08.2026: keine abgerundeten Ecken.
   =================================================================== */

@font-face{
  font-family:'Faustina';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/faustina-latin-wght-normal.woff2') format('woff2');
  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:'Faustina';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/faustina-latin-ext-wght-normal.woff2') format('woff2');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Faustina';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('fonts/faustina-latin-wght-italic.woff2') format('woff2');
  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:'Faustina';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('fonts/faustina-latin-ext-wght-italic.woff2') format('woff2');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Mulish';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/mulish-latin-wght-normal.woff2') format('woff2');
  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:'Mulish';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/mulish-latin-ext-wght-normal.woff2') format('woff2');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --grund:#FFFFFF;
  --flaeche:#F3F5F4;
  --tinte:#2E2E2E;
  --tinte-2:#5B6166;
  --akzent:#B13744;
  --akzent-tief:#8E2C36;
  --linie:#E3E7E5;
  --linie-satt:#CDD3D0;
  --rund:0px;
  --bahn:940px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border-radius:var(--rund)}
a{color:var(--akzent-tief)}
a:focus-visible,.knopf:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}

h1,h2,h3{font-family:'Faustina',Georgia,'Times New Roman',serif;font-weight:600;line-height:1.18;color:var(--tinte);margin:0 0 .55em}
h1{font-size:clamp(2rem,6.2vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,3.6vw,1.85rem)}
h3{font-size:1.12rem;font-family:'Mulish',sans-serif;font-weight:800;letter-spacing:.01em}
p{margin:0 0 1.05em}

.bahn{max-width:var(--bahn);margin-inline:auto;padding-inline:clamp(1.15rem,5vw,2rem)}
.abschnitt{padding-block:clamp(2.6rem,7vw,4.4rem)}
.abschnitt--warm{background:var(--flaeche);border-block:1px solid var(--linie)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--akzent);color:#fff;padding:.7rem 1.1rem;font-weight:700;
}
.skip:focus{left:0}

/* --- Kopf ---------------------------------------------------------- */
.kopf{border-bottom:1px solid var(--linie);background:var(--grund)}
.kopf__innen{
  max-width:var(--bahn);margin-inline:auto;padding:1.05rem clamp(1.15rem,5vw,2rem);
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;
}
.marke{
  font-family:'Faustina',Georgia,serif;font-size:1.42rem;font-weight:600;
  color:var(--tinte);text-decoration:none;letter-spacing:.005em;
}
.marke em{font-style:normal;color:var(--akzent)}
.kopf__ort{color:var(--tinte-2);font-size:.88rem;letter-spacing:.06em;text-transform:uppercase}

/* --- Auftakt: Bild und Text nebeneinander ---------------------------
   Warum kein randloses Band (09.09.2026): Die Vorlage ist 1280x853, und
   die Motive stehen von 6 % bis 99 % der Bildhoehe. Jeder breite Streifen
   schneidet Ohrspitze oder Gesicht ab, und ein Band, das beide zeigt,
   waere auf 1920 px 873 px hoch. Hier steht das Foto ungeschnitten in
   seinem eigenen Format neben der Ueberschrift - nichts beschnitten,
   nichts hochgerechnet, keine Balken. */
.auftakt{background:var(--flaeche);border-bottom:1px solid var(--linie);padding-top:clamp(1.4rem,3vw,2.2rem)}
.auftakt__innen{
  max-width:var(--bahn);margin-inline:auto;
  padding:0 clamp(1.15rem,5vw,2rem) clamp(1.8rem,4vw,2.8rem);
  display:grid;gap:clamp(1.3rem,3vw,2rem);
}
.auftakt__bild{margin:0}
.auftakt__bild img{width:100%;height:auto;display:block}
.auftakt__text>*:last-child{margin-bottom:0}
.auftakt h1{margin-bottom:.45em}


/* --- Fliesstext ---------------------------------------------------- */
.kicker{
  color:var(--akzent-tief);font-size:.82rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 .7rem;
}
.lead{font-size:clamp(1.1rem,2.7vw,1.28rem);line-height:1.6;color:var(--tinte)}
.text>*{max-width:62ch}

.zitat{
  margin:2.3rem 0 0;padding:1.2rem 0 1.2rem 1.35rem;
  border-left:3px solid var(--akzent);
  font-family:'Faustina',Georgia,serif;font-style:italic;
  font-size:clamp(1.15rem,3.2vw,1.42rem);line-height:1.5;color:var(--tinte);
  max-width:34ch;
}

/* --- Der Weiter-Block ---------------------------------------------- */
.weiter{display:grid;gap:clamp(1.5rem,4vw,2.6rem);align-items:center}
@media (min-width:760px){
  .weiter{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
.weiter__bild{background:var(--linie)}
.weiter__text>*:last-child{margin-bottom:0}

.knopf{
  display:inline-block;margin-top:.5rem;
  background:var(--akzent);color:#fff;text-decoration:none;
  font-weight:800;font-size:1.02rem;letter-spacing:.01em;
  padding:.88rem 1.5rem;border:2px solid var(--akzent);border-radius:var(--rund);
  transition:background .15s ease,border-color .15s ease;
}
.knopf:hover{background:var(--akzent-tief);border-color:var(--akzent-tief)}

/* --- Kontakt ------------------------------------------------------- */
.kontakt{display:grid;gap:1.6rem}
@media (min-width:660px){.kontakt{grid-template-columns:1fr 1fr}}
.kontakt p{margin:0}
.kontakt dt{font-weight:800;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-2)}
.kontakt dd{margin:.15rem 0 1.05rem;font-size:1.06rem}
.kontakt dl{margin:0}

/* --- Rechtliches --------------------------------------------------- */
.recht{font-size:.94rem;color:var(--tinte-2);line-height:1.65}
.recht h2{font-size:1.22rem;color:var(--tinte)}
.recht h3{font-size:.95rem;margin:1.5rem 0 .3rem;color:var(--tinte)}
.recht__spalten{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:800px){.recht__spalten{grid-template-columns:1fr 1fr;align-items:start}}
.recht p{margin:0 0 .8em}

/* --- Fuss ---------------------------------------------------------- */
.fuss{border-top:1px solid var(--linie);background:var(--flaeche);padding-block:1.6rem;font-size:.9rem;color:var(--tinte-2)}
.fuss__innen{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center}
.fuss a{color:var(--akzent-tief)}
.fuss__links{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}

.kontakt__hinweis{font-size:.9rem;color:var(--tinte-2)}

/* --- eigenstaendige Rechtsseiten (impressum.html / datenschutz.html) --- */
.recht--seite{max-width:70ch;font-size:1rem;color:var(--tinte)}
.recht--seite h1{margin-bottom:.7em}
.recht--seite h2{font-size:1.18rem;margin:2rem 0 .45rem}
.recht--seite .lead{margin-bottom:1.6rem}
.zurueck{margin-top:2.6rem;margin-bottom:0}
a.marke:hover em{color:var(--akzent-tief)}