/* Maya PodoCare – Website
   Farben und Schriften gemäss Farbkonzept (Projekt 4). */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/mulish-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/mulish-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/mulish-latin-700-normal.woff2") format("woff2")}

:root{
  --pflaume:#3D2340; --violett:#5E3358; --mauve:#7A5373;
  --gold:#A8916A; --gold-dunkel:#7D6843; --gold-hell:#D9C7A3;
  --rose:#F1E1DD; --rose-linie:#E6CFC9; --weiss:#FFFFFF;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Mulish", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--pflaume);background:var(--weiss);font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--violett)}
a:hover{color:var(--pflaume)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.15}
p{margin:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--weiss);padding:8px 16px;z-index:10}
.skip:focus{left:8px;top:8px}

.wrap{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
.wrap-schmal{max-width:880px}
.wrap-mittel{max-width:1000px}

/* Kopfzeile */
.kopf{background:var(--weiss);border-bottom:1px solid var(--rose-linie)}
.kopf .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding-top:14px;padding-bottom:14px}
.kopf .logo img{height:56px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:16px}
.nav a{color:var(--pflaume);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--rose-linie)}
.nav a[aria-current="page"]{font-weight:700;border-bottom-color:var(--gold)}

/* Knöpfe */
.knopf{display:inline-block;text-decoration:none;font-weight:700;padding:14px 28px;border-radius:999px;border:1.5px solid transparent;line-height:1.3}
.knopf-voll{background:var(--violett);color:var(--weiss)}
.knopf-voll:hover{background:var(--pflaume);color:var(--weiss)}
.knopf-rand{background:var(--weiss);color:var(--violett);border-color:var(--violett)}
.knopf-rand:hover{background:var(--rose);color:var(--pflaume)}
.knopf-hell{background:var(--weiss);color:var(--pflaume)}
.knopf-hell:hover{background:var(--rose);color:var(--pflaume)}
.knopf-linie{background:transparent;color:var(--weiss);border-color:var(--gold-hell)}
.knopf-linie:hover{background:rgba(255,255,255,.1);color:var(--weiss)}
.nav a.knopf-voll{color:var(--weiss);padding:12px 22px;border-bottom:1.5px solid transparent}
.nav a.knopf-voll:hover{color:var(--weiss)}
.nav a.knopf-voll:hover{border-bottom-color:transparent}
.knoepfe{display:flex;flex-wrap:wrap;gap:14px;padding-top:8px}

/* Abschnitte */
.rose{background:var(--rose)}
.weiss{background:var(--weiss)}
.dunkel{background:var(--pflaume);color:var(--weiss)}
.dunkel h2{color:var(--weiss)}
.abschnitt{padding-top:80px;padding-bottom:80px}
.abschnitt-klein{padding-top:56px;padding-bottom:56px}
.zeile{display:flex;flex-wrap:wrap;gap:48px}
.zeile > *{min-width:0}
.mitte{align-items:center}
.spalte{display:flex;flex-direction:column;gap:12px}
.fliess{flex:1 1 400px}

.dachzeile{font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--mauve)}
.titel-gross{font-size:56px;line-height:1.08}
.titel{font-size:52px;line-height:1.1}
.h2-gross{font-size:42px}
.h2{font-size:34px}
.einleitung{font-size:19px;max-width:34em}
.goldlinie{width:64px;height:2px;background:var(--gold)}
.zentriert{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}

/* Einstieg */
.einstieg{padding-top:72px;padding-bottom:72px}
.einstieg .text{flex:1 1 420px;display:flex;flex-direction:column;gap:20px}
.einstieg picture{flex:1 1 380px}
.einstieg img{width:100%;height:420px;object-fit:cover;object-position:60% 50%;border-radius:4px}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.kachel{background:var(--rose);padding:28px 24px;display:flex;flex-direction:column;gap:8px}
.kachel h3{font-size:26px}
.kachel p{font-size:16px}
.preis{font-weight:700;color:var(--violett)}
.kachel .preis{font-size:17px;margin-top:auto}

/* Porträt */
.portraet{flex:0 1 320px}
.portraet img{width:100%;height:400px;object-fit:cover;object-position:50% 22%;border-radius:4px}
.portraet-gross{flex:0 1 300px}
.portraet-gross img{height:440px;object-position:50% 20%}

/* Eingang */
.eingang{flex:0 1 340px;margin:0;display:flex;flex-direction:column;gap:8px}
.eingang img{width:100%;height:480px;object-fit:cover;object-position:50% 40%;border-radius:4px}
.eingang figcaption{font-size:14px;color:var(--mauve)}

/* Preisliste */
.preisliste{display:flex;flex-direction:column}
.posten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding:28px 0;border-bottom:1px solid var(--rose-linie)}
.posten > div:first-child{flex:1 1 420px;min-width:0}
.posten h2{font-size:30px;margin-bottom:6px}
.posten .betrag{text-align:right}
.posten .betrag .preis{font-size:20px;white-space:nowrap}
.posten .betrag .zusatz{font-size:15px}

/* Lebenslauf */
.lauf{display:flex;flex-wrap:wrap;gap:4px 24px;padding:16px 0;border-top:1px solid var(--rose-linie)}
.lauf:last-child{border-bottom:1px solid var(--rose-linie)}
.lauf .wann{flex:0 0 150px;font-weight:700;color:var(--gold-dunkel)}
.lauf .was{flex:1 1 300px;min-width:0}

/* Öffnungszeiten */
.zeiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
.klein{font-size:15px}

/* Rechtstexte */
.recht h2{font-size:30px;margin:40px 0 10px}
.recht h2:first-child{margin-top:0}
.recht p,.recht ul{margin:0 0 12px}
.recht ul{padding-left:1.2em}

/* Band mit Knopf */
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}

/* Fusszeile */
.fuss{background:var(--weiss);border-top:1px solid var(--rose-linie);font-size:14px}
.fuss .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:28px;padding-bottom:28px}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* Handy */
@media (max-width:720px){
  body{font-size:16px}
  .kopf .logo img{height:44px}
  .nav{gap:4px 14px;font-size:15px;width:100%;justify-content:space-between}
  .nav .knopf{order:-1;width:100%;text-align:center}
  .nav .nur-gross{display:none}
  .abschnitt{padding-top:56px;padding-bottom:56px}
  .abschnitt-klein{padding-top:44px;padding-bottom:44px}
  .einstieg{padding-top:44px;padding-bottom:44px}
  .zeile{gap:32px}
  .titel-gross{font-size:40px}
  .titel{font-size:38px}
  .h2-gross{font-size:34px}
  .h2{font-size:30px}
  .einleitung{font-size:17px}
  .einstieg img{height:260px}
  .portraet img,.portraet-gross img{height:360px}
  .eingang{flex-basis:100%}
  .eingang img{height:420px}
  .posten .betrag{text-align:left}
}