/*
Theme Name: Fritzis Keramik
Description: Klassische Optik nach der alten Strato-Seite. Schriften liegen im Theme, nichts wird von fremden Servern geladen.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: fritzis-keramik
*/

/* Schriften aus dem Theme, nicht von Google (Datenschutzerklärung: keine Fremdinhalte) */
@font-face{font-family:'Euphoria Script';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/euphoria-script-400.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:'Fauna One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fauna-one-400.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:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfair-display-400.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:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/playfair-display-400.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:'Playfair Display SC';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfair-display-sc-400.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}

:root{--violett:#595575;--violett-hell:#77719c;--text:#6b6b6b;
  --flaeche:rgba(255,255,255,.96);--akzent:#B33B95;--linie:#e6e4ec;
  --leiste:rgba(132,126,168,.89);--leiste-text:#FCFCFC;--kopf:rgba(252,252,252,.87)}
*{box-sizing:border-box}
body{margin:0;font-family:"Fauna One",serif;font-size:16px;line-height:1.6;color:var(--text);background:#efeef3}
/* Hintergrundbild klar, ohne Schleier. Das Bild selbst kommt aus Design → Hintergrund */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:center/cover no-repeat}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
img{max-width:100%;height:auto}

/* 1280 px breit, innen 1220 px; darunter schrumpft alles mit */
.huelle{max-width:1280px;margin:0 auto;padding:0 30px 64px}

/* Kopf und Fuß auf halbtransparenter Fläche wie im Original */
header.kopf{text-align:center;padding:26px 16px 20px;margin-top:32px;background:var(--kopf)}
.kopf-link{text-decoration:none;display:inline-block}
.kopf .logo{display:block;margin:0 auto 8px;width:100px;height:100px;border-radius:50%;
  object-fit:cover;background:var(--flaeche);padding:8px}
.kopf .marke{display:block;font-family:"Playfair Display SC",serif;font-size:48px;font-weight:400;
  color:var(--violett);line-height:1.1}
.untertitel{font-family:"Euphoria Script",cursive;font-size:36px;color:var(--violett-hell);margin-top:2px}

/* Menüleiste: lila, klebt beim Scrollen oben fest */
nav.leiste{position:sticky;top:0;z-index:50;background:var(--leiste);display:flex;align-items:center;
  transition:box-shadow .3s}
body.admin-bar nav.leiste{top:32px}
nav.leiste.haftet{box-shadow:0 2px 14px rgba(40,38,55,.3)}
nav.leiste ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;padding:0}
nav.leiste li>a{position:relative;z-index:0;display:block;padding:14px 20px;font-size:18px;
  text-decoration:none;color:var(--leiste-text);font-family:"Playfair Display",serif}
/* Hover: dunkleres Lila spannt sich mit kurzer Verzögerung von unten auf */
nav.leiste li>a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--violett);
  transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease .08s}
nav.leiste li>a:hover::before,nav.leiste li.current-menu-item>a::before{transform:scaleY(1)}
/* Logo und Name fahren links in die Leiste, sobald sie oben klebt */
.leiste-marke{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding-left:14px;text-decoration:none;opacity:0;transform:translateX(-12px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
nav.leiste.haftet .leiste-marke{opacity:1;transform:none;pointer-events:auto}
.leiste-marke img{width:36px;height:36px;border-radius:50%;background:var(--flaeche);padding:3px}
.leiste-marke span{font-family:"Playfair Display SC",serif;font-size:20px;color:var(--leiste-text)}

main.inhalt{background:var(--flaeche);padding:40px}
h2{font-family:"Playfair Display",serif;font-size:28px;font-weight:400;color:var(--violett);margin:0 0 .7em}
h3{font-family:"Playfair Display",serif;font-size:21px;font-weight:400;color:var(--violett);margin:1.6em 0 .5em}
a{color:var(--akzent)}
.wp-block-image{margin:24px 0}
.wp-block-image img{border:6px solid #fff;box-shadow:0 2px 10px rgba(89,85,117,.18)}
.wp-block-image a{display:inline-block}
/* Ausgerichtete Bilder: WordPress setzt die Klasse je nach Theme auf den Rahmen oder das innere figure */
.wp-block-image figure{margin:0}
.wp-block-image figcaption{text-align:center;color:var(--violett);font-size:15px;margin-top:8px}
.wp-block-image.aligncenter,.wp-block-image .aligncenter{display:table;margin-left:auto;margin-right:auto}
.wp-block-image.alignright,.wp-block-image .alignright{float:right;margin:4px 0 16px 24px}
.wp-block-image.alignleft,.wp-block-image .alignleft{float:left;margin:4px 24px 16px 0}
.inhalt article::after{content:"";display:table;clear:both}

/* Galerien: ganze Bilder im Mauerwerk-Raster, Überschrift mit Anzahl */
.galerie-kopf{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;margin:48px 0 20px;
  border-bottom:1px solid var(--linie);font-size:24px}
.anzahl{font-family:"Fauna One",serif;font-size:14px;color:#918da0}
.inhalt .wp-block-gallery.has-nested-images{display:block;columns:4 200px;column-gap:14px;margin:0}
.inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
  width:auto!important;margin:0 0 14px!important;break-inside:avoid;display:block}
.inhalt .wp-block-gallery.has-nested-images figure.wp-block-image img{width:100%;height:auto!important;
  object-fit:initial!important;display:block;cursor:zoom-in;background:#fff;border:1px solid var(--linie);
  box-shadow:none;transition:transform .3s,box-shadow .3s}
.inhalt .wp-block-gallery.has-nested-images figure.wp-block-image img:hover{transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(46,43,58,.16)}
.inhalt .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{position:static;background:none;
  color:var(--violett-hell);font-size:13px;padding:5px 0 0;text-align:left;max-height:none;
  text-shadow:none;overflow:visible}
/* WordPress legt bei Bildern mit Unterschrift einen Weichzeichner über den unteren Rand —
   die Unterschrift steht hier unter dem Bild, der Streifen entfällt */
.inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before{content:none;display:none}
/* Sprungziel aus einem Verweis auf ein Galeriebild: nicht unter der Menüleiste verschwinden */
.wp-block-gallery figure[id^="bild-"]{scroll-margin-top:90px}

/* Formulare: Kontakt (Contact Form 7) und Gästebuch */
.wpcf7 form,#respond{max-width:560px}
label{display:block;font-size:15px;color:var(--violett);margin-bottom:4px}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;padding:9px 11px;
  border:1px solid #cfccdb;background:#fff;font:inherit;color:inherit}
textarea{min-height:130px;resize:vertical}
input[type=submit],button{background:var(--violett);color:#fff;border:0;padding:11px 26px;font:inherit;cursor:pointer}
input[type=submit]:hover,button:hover{background:var(--akzent)}
.wpcf7-acceptance label,.comment-form-cookies-consent label{display:inline;color:var(--text);font-size:14px}
.wpcf7-not-valid-tip{font-size:14px}
.hinweis-klein{font-size:14px;color:#8d8a9c}

/* Gästebuch: erst die Einträge, dann das Formular */
.eintraege{list-style:none;margin:0 0 40px;padding:0}
.eintrag{border-top:1px solid var(--linie);padding:18px 0}
.eintrag .children{list-style:none;margin:12px 0 0 28px;padding:0}
.eintrag-kopf{display:flex;gap:10px;align-items:baseline;margin-bottom:4px}
.eintrag-name{font-family:"Playfair Display",serif;font-size:19px;color:var(--violett)}
.eintrag-datum{font-size:13px;color:#948fa6}
.wartet{font-size:14px;color:#a07a1f}

footer.fuss{text-align:center;padding:22px 16px;font-size:14px;color:var(--violett);background:var(--kopf)}
footer.fuss a{color:var(--violett)}

/* Vollbild mit Blättern: Pfeile, Pfeiltasten, Wischen */
.lightbox{display:none;position:fixed;inset:0;z-index:99999;background:rgba(40,38,55,.94);
  flex-direction:column;align-items:center;justify-content:center;padding:24px 80px}
.lightbox.open{display:flex}
.lb-bild{max-width:100%;max-height:calc(100% - 50px);object-fit:contain}
.lb-unter{color:#eee;font-size:15px;margin-top:12px;text-align:center}
.lb-close{position:absolute;top:12px;right:20px;font-size:40px;line-height:1;background:none;border:0;
  color:#fff;cursor:pointer;padding:0}
.lb-pfeil{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;
  color:#fff;font-size:36px;width:52px;height:76px;cursor:pointer;border-radius:4px;padding:0}
.lb-pfeil:hover{background:rgba(255,255,255,.28)}
.lb-zurueck{left:14px}.lb-weiter{right:14px}

@media(max-width:900px){.leiste-marke{display:none}}
@media(max-width:782px){body.admin-bar nav.leiste{top:46px}}
@media(max-width:640px){.huelle{padding:0 12px 48px}.kopf .marke{font-size:31px}.untertitel{font-size:25px}
  main.inhalt{padding:24px 18px}.wp-block-image .alignright,.wp-block-image .alignleft,.wp-block-image.alignright,.wp-block-image.alignleft{float:none;margin:0 auto 16px;display:table}nav.leiste li>a{padding:10px 12px;font-size:16px}
  .lightbox{padding:24px 12px}.lb-pfeil{width:40px;height:60px;font-size:28px}}