@font-face{font-family:"Playfair Display";src:url(/assets/fonts/playfair-display-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(/assets/fonts/playfair-display-latin-wght-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/jost-latin-wght-normal.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --suelo:#e4eee8;--hoja:#fbfcf9;--tinta:#1f1a16;--gris:#5b5650;
  --nogal:#3a2419;--nogal-2:#2a1a12;--cognac:#9b4a1d;--rojo:#b8232f;--laton:#b58a3a;--crema:#f4ecdc;
  --titulo:"Playfair Display",Georgia,serif;--texto:Jost,"Segoe UI",sans-serif;
  --ancho:72rem;--lectura:43rem
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--suelo);color:var(--tinta);font:400 1.09rem/1.7 var(--texto)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--cognac);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--rojo)}
h1,h2,h3{font-family:var(--titulo);line-height:1.18;font-weight:700;letter-spacing:-.01em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,5vw,3.3rem)}
h2{font-size:clamp(1.45rem,3vw,1.85rem);margin-top:2.1em}
h3{font-size:1.2rem;margin-top:1.6em}
p,ul,ol{margin:0 0 1.1em}
.saltar{position:absolute;left:-999px}.saltar:focus{left:1rem;top:1rem;background:var(--hoja);padding:.5rem 1rem;z-index:9}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 1rem}

/* Streifen + Kopf */
.franja{height:9px;background:repeating-linear-gradient(-45deg,var(--rojo) 0 12px,var(--crema) 12px 24px,var(--cognac) 24px 36px,var(--crema) 36px 48px)}
.cabecera{background:var(--nogal);color:var(--crema)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:.8rem;color:var(--crema);text-decoration:none}
.marca:hover{color:#fff}
.marca svg{height:46px;width:auto}
.marca-nombre{font-family:var(--titulo);font-size:1.7rem;font-weight:800;letter-spacing:.02em;line-height:1}
.marca-nombre i{color:var(--laton);font-style:normal}
.marca-lema{display:block;font:500 .72rem/1.3 var(--texto);letter-spacing:.2em;text-transform:uppercase;color:#d9c7a6;margin-top:.3rem}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.3rem}
.menu a{color:var(--crema);text-decoration:none;font:500 .82rem/1 var(--texto);letter-spacing:.14em;text-transform:uppercase;padding:.45rem 0;border-bottom:2px solid transparent;display:inline-block}
.menu a:hover,.menu a[aria-current]{border-bottom-color:var(--laton);color:#fff}

/* Brotkrumen */
.migas{font-size:.85rem;color:var(--gris);margin:1.6rem 0 1rem}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.migas li+li::before{content:"›";margin-right:.3rem;color:var(--laton)}
.migas a{color:var(--gris)}

/* Startseite */
.portada{padding:3rem 0 2.5rem}
.portada .contenedor{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.portada-antetitulo{font:600 .78rem/1 var(--texto);letter-spacing:.24em;text-transform:uppercase;color:var(--cognac);margin-bottom:1rem}
.portada h1 em{font-style:italic;color:var(--rojo);font-weight:600}
.portada-intro{font-size:1.18rem;max-width:34rem}
.botones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.boton{display:inline-block;padding:.75rem 1.3rem;border:2px solid var(--nogal);color:var(--nogal);text-decoration:none;font:600 .86rem/1 var(--texto);letter-spacing:.1em;text-transform:uppercase}
.boton--lleno{background:var(--nogal);color:var(--crema)}
.boton:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.espejo{background:var(--hoja);border:3px solid var(--laton);border-radius:48% 48% 14px 14px / 30% 30% 14px 14px;padding:2.2rem 1rem 1rem;box-shadow:0 0 0 8px var(--hoja),0 0 0 9px #c9d8cf}
.espejo a:hover rect{stroke:var(--rojo);stroke-width:3}
.espejo-pie{text-align:center;font-size:.85rem;color:var(--gris);margin:.4rem 0 0}

.seccion{padding:3.2rem 0}
.seccion-cabeza{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.seccion-cabeza h2{margin:0}
.seccion-num{font:italic 700 2.4rem/1 var(--titulo);color:var(--laton)}
.seccion-nota{color:var(--gris);margin:0;flex-basis:100%}

/* Die Karte (Preistafel-Optik) */
.carta{background:var(--nogal);color:var(--crema);padding:2.4rem 2rem;border:6px double var(--laton);border-radius:6px}
.carta-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:2rem 3rem}
.carta h3{color:var(--laton);font-style:italic;font-size:1.45rem;margin:0 0 .3rem}
.carta h3 a{color:inherit;text-decoration:none}.carta h3 a:hover{color:#fff}
.carta-desc{font-size:.9rem;color:#d9c7a6;margin:0 0 .8rem}
.carta ul{list-style:none;margin:0;padding:0}
.carta li{display:flex;align-items:baseline;gap:.4rem;padding:.18rem 0;font-size:.98rem}
.carta li a{color:var(--crema);text-decoration:none}
.carta li a:hover{color:#fff;text-decoration:underline}
.carta li::after{content:"";order:1;flex:1;border-bottom:1px dotted #8c7760;transform:translateY(-.3em)}
.carta li span{order:2;font-size:.78rem;color:#cdb58f;white-space:nowrap}

/* Wochenroutine */
.rutina{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;list-style:none;padding:0;margin:0}
.rutina li{background:var(--hoja);border-top:4px solid var(--cognac);padding:.9rem .7rem;font-size:.9rem;line-height:1.45}
.rutina li:nth-child(3n){border-top-color:var(--rojo)}
.rutina b{display:block;font:700 1.05rem/1.2 var(--titulo);margin-bottom:.3rem}

/* Werkzeuge */
.herramientas{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1rem;list-style:none;padding:0;margin:0}
.herramientas li{background:var(--hoja);padding:1.2rem 1rem;text-align:center;border-radius:4px;box-shadow:0 1px 0 #c9d8cf}
.herramientas svg{width:48px;margin:0 auto .6rem}
.herramientas a{font-weight:600;text-decoration:none;color:var(--tinta)}
.herramientas a:hover{color:var(--rojo)}
.herramientas p{font-size:.85rem;color:var(--gris);margin:.3rem 0 0}

.dividido{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.dividido figure{margin:0}

/* Fragen */
.preguntas details{background:var(--hoja);border-left:4px solid var(--laton);margin:0 0 .6rem;padding:.2rem 1.2rem}
.preguntas summary{cursor:pointer;font-weight:600;padding:.8rem 0;list-style:none}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::before{content:"+";display:inline-block;width:1.3rem;color:var(--rojo);font-weight:700}
.preguntas details[open] summary::before{content:"–"}

/* Beitrag */
.ficha{max-width:var(--lectura);margin:0 auto;padding:0 1rem 2rem}
.ficha-rubro{display:inline-block;font:600 .75rem/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--hoja);background:var(--cognac);padding:.45rem .7rem;text-decoration:none;margin-bottom:1rem}
.ficha-rubro:hover{background:var(--rojo);color:#fff}
.ficha-datos{font-size:.88rem;color:var(--gris);display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin-bottom:1.4rem}
.ficha-entrada{font-size:1.24rem;line-height:1.6;font-family:var(--titulo);font-style:italic;color:#3b332c;border-top:1px solid var(--laton);border-bottom:1px solid var(--laton);padding:1rem 0;margin-bottom:1.8rem}
.cuerpo{background:var(--hoja);padding:2rem clamp(1rem,4vw,2.6rem);border-radius:4px}
.cuerpo>h2:first-child{margin-top:0}
.cuerpo ul,.cuerpo ol{padding-left:1.3rem}
.cuerpo li{margin-bottom:.35rem}
.cuerpo li::marker{color:var(--cognac)}
.cuerpo table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.95rem}
.cuerpo th,.cuerpo td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid #dde5df;vertical-align:top}
.cuerpo th{background:var(--suelo);font-weight:600}
.tabla-envoltura{overflow-x:auto}
.cuerpo figure,.ficha figure{margin:1.8rem 0}
figcaption{font-size:.82rem;color:var(--gris);margin-top:.5rem;line-height:1.5}
.lamina{margin:1.8rem 0}

/* Pflegekarte (Ticket) */
.tique{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.2rem 1rem;background:var(--crema);padding:1rem 1.4rem 1rem 2rem;margin:0 0 1.8rem;position:relative;border-radius:3px;
  background-image:radial-gradient(circle at 0 50%,var(--suelo) 0 9px,transparent 10px);background-size:100% 26px;background-repeat:repeat-y}
.tique dt{font:600 .7rem/1.2 var(--texto);letter-spacing:.16em;text-transform:uppercase;color:var(--cognac)}
.tique dd{margin:0 0 .5rem;font-size:.95rem}

.nota{background:var(--suelo);border-left:4px solid var(--laton);padding:1rem 1.2rem;margin:1.5rem 0}
.nota strong:first-child{font-family:var(--titulo);font-style:italic;color:var(--cognac)}
.cuidado{border:2px dashed var(--rojo);padding:1rem 1.2rem;margin:1.5rem 0;border-radius:4px}
.cuidado strong:first-child{color:var(--rojo)}

/* Anzeige als Kassenbon */
.recibo{background:#fffdf6;margin:2.2rem auto;max-width:30rem;padding:1.3rem 1.4rem 1.6rem;font-size:.95rem;position:relative;box-shadow:0 2px 10px rgba(58,36,25,.12);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/20px 10px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/20px 10px repeat-x}
.recibo-marca{font:700 .7rem/1 var(--texto);letter-spacing:.3em;text-transform:uppercase;text-align:center;color:var(--gris);margin:0 0 .5rem}
.recibo-titulo{font:700 1.1rem/1.3 var(--titulo);text-align:center;border-bottom:1px dashed #b8ab96;padding-bottom:.7rem;margin-bottom:.7rem}
.recibo ol{list-style:none;padding:0;margin:0 0 .8rem}
.recibo li{display:flex;gap:.7rem;padding:.3rem 0;border-bottom:1px dotted #d8cfbf}
.recibo-pos{color:var(--gris);font-variant-numeric:tabular-nums}
.recibo-pie{font-size:.78rem;color:var(--gris);margin:0}

.fuentes{font-size:.9rem;margin-top:2rem;padding-top:1rem;border-top:1px solid #dde5df}
.fuentes h2{font-size:1.05rem;margin:0 0 .5rem;font-family:var(--texto);letter-spacing:.1em;text-transform:uppercase}
.fuentes ul{padding-left:1.1rem;margin:0}

.vecinos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}
.vecinos a{background:var(--nogal);color:var(--crema);text-decoration:none;padding:1rem 1.2rem;display:block;border-radius:3px}
.vecinos a:hover{background:var(--rojo)}
.vecinos small{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--laton)}
.vecinos .siguiente{text-align:right;grid-column:2}

.afines{max-width:var(--ancho);margin:0 auto;padding:1rem 1rem 3rem}
.afines h2{font-size:1.4rem;margin:0 0 1rem}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;list-style:none;padding:0;margin:0}
.tarjeta{background:var(--hoja);padding:1.1rem 1.2rem 1.2rem;border-bottom:3px solid var(--laton);height:100%}
.tarjeta small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cognac)}
.tarjeta h3{font-size:1.08rem;margin:.35rem 0 .4rem}
.tarjeta h3 a{color:var(--tinta);text-decoration:none}
.tarjeta h3 a:hover{color:var(--rojo)}
.tarjeta p{font-size:.88rem;color:var(--gris);margin:0}

.carta--mini{margin-top:2.5rem;padding:1.6rem 1.4rem}

/* Rubrikseite */
.rubro-cabeza{padding:1rem 0 1.5rem}
.rubro-cabeza .ficha-entrada{max-width:46rem}
.texto-rubro{max-width:var(--lectura)}

/* Fuß */
.pie{background:var(--nogal-2);color:#d9c7a6;margin-top:2rem;font-size:.92rem}
.pie::before{content:"";display:block;height:9px;background:repeating-linear-gradient(45deg,var(--rojo) 0 12px,var(--crema) 12px 24px,var(--cognac) 24px 36px,var(--crema) 36px 48px)}
.pie-rejilla{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;padding:2.6rem 1rem 1.5rem}
.pie h2{font:600 .78rem/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--laton);margin:0 0 .9rem}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin:.25rem 0}
.pie a{color:var(--crema);text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie-base{border-top:1px solid #4a3326;padding:1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.8rem}

.simple{max-width:var(--lectura);margin:0 auto;padding:0 1rem 3rem}
.simple .cuerpo h2{font-size:1.3rem}

@media (max-width:900px){
  .portada .contenedor,.dividido{grid-template-columns:1fr}
  .rutina{grid-template-columns:repeat(2,1fr)}
  .pie-rejilla{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:1.02rem}
  .carta{padding:1.6rem 1.1rem}
  .vecinos{grid-template-columns:1fr}
  .vecinos .siguiente{grid-column:1}
  .menu ul{gap:.1rem 1rem}
  .marca-nombre{font-size:1.45rem}
}