/*
Blogger Sans:
Das Theme verwendet bewusst die Schriftfamilie "Blogger Sans".
Aus Lizenzgründen ist keine Fontdatei Bestandteil des Themes.
Wenn Sie eine lizenzierte Webfontdatei besitzen, legen Sie sie als
assets/fonts/blogger-sans.woff2 ab. Danach wird sie automatisch verwendet.
*/
@font-face {
  font-family: "Blogger Sans";
  src: url("../fonts/BloggerSans-Light.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";
  src: url("../fonts/BloggerSans.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";
  src: url("../fonts/BloggerSans-Medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";
  src: url("../fonts/BloggerSans-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* Die Variablen stehen bewusst auch auf body: der Blockeditor bindet dieses
   Stylesheet gekapselt ein, dabei wird body auf den Editorbereich umgeschrieben.
   So gelten Farben und Schrift auch in der Editoransicht. */
:root,body{
  --blue:#0a55b3;
  --blue-deep:#073F96;
  --cyan:#0d9ed9;
  --cyan-soft:#e3f6fd;
  --yellow:#f6ca47;
  --warm:#fffaf2;
  --white:#fff;
  --ink:#173844;
  --muted:#687c84;
  --line:rgba(10,90,131,.18);
  --radius:22px;
  --shadow:0 18px 60px rgba(6,70,102,.11);
  --max:1180px;
  --font:"Blogger Sans","Trebuchet MS",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--warm);color:var(--ink);font-family:var(--font);line-height:1.65;font-size:18px}
a{color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font);color:var(--blue);line-height:1.02;letter-spacing:-.025em;margin:0 0 .55em;font-weight:800}
h1{font-size:clamp(3rem,8vw,7rem)}
h2{font-size:clamp(2rem,4.5vw,4.1rem)}
h3{font-size:1.5rem}
p{margin:0 0 1.05em}
strong{font-weight:800}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;z-index:1000;background:white;padding:.6rem 1rem}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,250,242,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.header-inner{max-width:var(--max);margin:auto;padding:1rem 24px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{text-decoration:none;display:flex;flex-direction:column}.brand-name{font-weight:900;letter-spacing:.055em;color:var(--blue);font-size:1.42rem}.brand-sub{font-size:.8rem;color:var(--cyan);font-weight:800;letter-spacing:.06em}
.menu{display:flex;list-style:none;padding:0;margin:0;gap:1.1rem;align-items:center}.menu a{text-decoration:none;font-size:.94rem;font-weight:800}.menu a:hover,.menu a:focus{color:var(--cyan)}
.nav-toggle{display:none;border:2px solid var(--blue);background:transparent;color:var(--blue);border-radius:999px;padding:.45rem .85rem;font-family:var(--font);font-weight:800}
.hero{max-width:var(--max);margin:0 auto;padding:48px 24px 80px;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero-media .site-photo,.hero-media .photo-placeholder{min-height:560px}.hero h1{margin:.08em 0 .18em}
.lead,.is-style-lead{font-size:clamp(1.35rem,2.5vw,2.15rem);line-height:1.22;color:var(--blue-deep)}
.eyebrow,.kicker,.is-style-eyebrow,.is-style-kicker{text-transform:uppercase;letter-spacing:.13em;font-size:.8rem;font-weight:900;color:var(--cyan);margin-bottom:1rem}
.kicker.light,.is-style-kicker.light{color:var(--yellow)}
blockquote{margin:2rem 0;padding:1rem 0 1rem 1.5rem;border-left:5px solid var(--yellow);font-size:1.35rem;color:var(--blue-deep);font-weight:600}
blockquote cite{display:block;margin-top:.7rem;font-size:.76rem;font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.section{max-width:var(--max);margin:0 auto;padding:88px 24px}.narrow{max-width:820px}.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.blue-panel,.cyan-panel{max-width:none;padding-left:max(24px,calc((100vw - var(--max))/2 + 24px));padding-right:max(24px,calc((100vw - var(--max))/2 + 24px))}
.blue-panel{background:var(--blue);color:white}.blue-panel h2,.blue-panel h3,.blue-panel a{color:white}.blue-panel .punch,.blue-panel .is-style-punch{color:var(--yellow)}.blue-panel blockquote{color:white}
.cyan-panel{background:var(--cyan-soft)}.opening{text-align:center}.opening blockquote{max-width:720px;margin:2rem auto}
.punch,.is-style-punch{font-size:1.38rem;line-height:1.33;font-weight:800;color:var(--blue)}
.button{display:inline-block;text-decoration:none;border-radius:999px;padding:.8rem 1.2rem;font-weight:850;margin-top:.6rem}.button.yellow{background:var(--yellow);color:var(--blue-deep)}.button.dark{background:var(--blue);color:white}.text-link{font-weight:850;font-size:1.05rem}
.hours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:620px;margin:2.2rem auto}
/* Nachfahren-Selektoren statt ">", damit die Regeln unabhaengig davon greifen,
   ob WordPress die Gruppenhuelle wp-block-group__inner-container einzieht. */
.hours .hours-card{background:white;border:2px solid var(--blue);padding:1rem 1.2rem;border-radius:16px;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-align:left}
.hours .hours-card p{margin:0}
.hours span,.hours .hours-day{color:var(--blue);font-weight:800}
.hours strong,.hours .hours-time{color:var(--cyan);font-weight:800}
.light-hours .hours-card{border-color:var(--yellow)}
.image-strip{display:grid;grid-template-columns:1fr 1fr;gap:22px}.page-hero{max-width:var(--max);margin:0 auto;padding:90px 24px 34px}.page-hero.compact h1{font-size:clamp(3.5rem,8vw,6.8rem)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.work-card{margin:0;background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.work-card figcaption{padding:1rem 1.15rem 1.3rem}.work-card .site-photo,.work-card .photo-placeholder{aspect-ratio:4/5}
.site-photo{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
/* width:100% ist hier wichtig, nicht kosmetisch: zusammen mit aspect-ratio
   und einer groesseren min-height wuerde die Breite sonst aus der Hoehe
   abgeleitet und der Kasten liefe aus seiner Spalte heraus. */
.photo-placeholder{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;min-height:340px;aspect-ratio:4/3;padding:2rem;border-radius:var(--radius);border:2px dashed rgba(10,90,131,.35);background:linear-gradient(135deg,rgba(13,158,217,.12),rgba(246,202,71,.14));color:var(--blue);font-weight:800}
.admin-note,.legal-warning,.contact-hint{padding:1rem 1.2rem;border-radius:14px;background:#fff;border-left:5px solid var(--yellow)}
.site-footer{background:var(--blue-deep);color:white;padding:50px 24px}.footer-inner{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1fr 2fr 1fr;gap:24px;align-items:start}.site-footer a{color:white;margin-right:.8rem}.footer-line{grid-column:1/-1;color:var(--yellow);font-weight:800;margin-top:1rem}
@media(max-width:900px){
  body{font-size:17px}.hero,.split{grid-template-columns:1fr;gap:30px}.hero{padding-top:30px}.hero-media .site-photo,.hero-media .photo-placeholder{min-height:420px}.gallery-grid{grid-template-columns:repeat(2,1fr)}.menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--warm);padding:1rem 24px 1.4rem;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.primary-nav.open .menu{display:flex}.nav-toggle{display:block}.footer-inner{grid-template-columns:1fr}.footer-line{grid-column:auto}
}
@media(max-width:600px){
  .header-inner{padding:12px 16px}.brand-name{font-size:1.14rem}.brand-sub{font-size:.68rem}.hero,.section,.page-hero{padding-left:18px;padding-right:18px}.section{padding-top:62px;padding-bottom:62px}.gallery-grid,.hours,.image-strip{grid-template-columns:1fr}.hero-media .site-photo,.hero-media .photo-placeholder{min-height:300px}
}

.atelier-post-teaser{padding-top:54px;padding-bottom:54px}
.atelier-post-card{background:white;border-radius:var(--radius);padding:clamp(1.6rem,4vw,3rem);box-shadow:var(--shadow);border-top:8px solid var(--yellow)}
.atelier-post-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:2rem 0}
.atelier-post-points p{margin:0;background:white;border:1px solid var(--line);padding:1rem;border-radius:14px;font-weight:800;color:var(--blue)}
.newsletter-box{max-width:820px}
.newsletter-form-mockup{background:white;border-radius:var(--radius);padding:1.4rem;margin:1.5rem 0;box-shadow:var(--shadow)}
.newsletter-form-mockup label{display:block;font-weight:800;color:var(--blue);margin:.7rem 0}
.fake-input{border:2px solid var(--line);background:var(--warm);border-radius:12px;padding:.85rem 1rem;color:var(--muted);margin-bottom:1rem}
.consent-line{display:flex!important;gap:.7rem;align-items:flex-start;font-weight:600!important;color:var(--ink)!important}
.fake-checkbox{flex:0 0 auto;width:1.4rem;height:1.4rem;border:2px solid var(--blue);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:var(--blue);font-size:.8rem}
.disabled-button{opacity:.7;pointer-events:none}
.small-note{font-size:.92rem;color:var(--muted)}
@media(max-width:700px){.atelier-post-points{grid-template-columns:1fr}}

/* =========================================================================
   Gutenberg-Blöcke
   Die Seiteninhalte bestehen aus WordPress-Kernblöcken, die dieselben
   Klassen tragen wie früher die handgeschriebene Auszeichnung. Hier stehen
   nur die Ergänzungen, mit denen das Blockmarkup dieselbe Darstellung
   erreicht. Wo Kernstile mit einer Klasse arbeiten, wird bewusst mit zwei
   Klassen gearbeitet, damit die Reihenfolge der Stylesheets keine Rolle spielt.
   ========================================================================= */
/* WordPress legt bei klassischen Themes ohne theme.json um den Inhalt JEDER
   Blockgruppe zusätzlich ein <div class="wp-block-group__inner-container">
   (wp_restore_group_inner_container() in wp-includes/blocks.php, aus Rücksicht
   auf ältere Inhalte). Eine Gruppe hätte damit nur ein einziges Kindelement –
   Raster wie .image-strip, .gallery-grid, .hours oder .atelier-post-points
   bekämen nur ein Feld gefüllt und ihr Inhalt würde darin untereinander
   stapeln. display:contents nimmt diese Hülle aus dem Layout heraus, sodass
   die eigentlichen Blöcke wieder selbst zu Raster- bzw. Flexelementen werden.
   Im Editor gibt es die Hülle nicht; die Regel greift dort schlicht ins Leere. */
.wp-block-group__inner-container{display:contents}

/* Achtung: hier bewusst KEINE Regel ".wp-block-group{margin:0}".
   Sie hätte dieselbe Spezifität wie .section, .page-hero, .hours und
   .atelier-post-points, stünde aber später im Stylesheet – und würde deren
   "margin:… auto" aushebeln. Alle Abschnitte, die eine Blockgruppe sind,
   würden dadurch aus der Mitte nach links rutschen. */
.wp-block-group>*:last-child,
.wp-block-group__inner-container>*:last-child{margin-bottom:0}

/* Zweispaltige Abschnitte: das Raster des Themes ersetzt das Flexlayout
   der Spaltenblöcke. align-items braucht !important, weil der Kernstil des
   Spaltenblocks "align-items:initial !important" setzt. */
.wp-block-columns.split,.wp-block-columns.hero{display:grid;align-items:center!important}
.wp-block-columns.split{grid-template-columns:1fr 1fr;gap:64px}
.wp-block-columns.hero{grid-template-columns:1.08fr .92fr;gap:56px}
.wp-block-columns.split>.wp-block-column,.wp-block-columns.hero>.wp-block-column{min-width:0}
.wp-block-column>*:last-child{margin-bottom:0}

/* Bilder
   Das <figure> des Bild-Blocks bekommt ausdruecklich die volle Spaltenbreite.
   Ohne diese Angabe richtet es sich nach seinem Inhalt: ein hochaufloesendes
   Foto oder ein Platzhalter mit aspect-ratio und min-height wuerde die Spalte
   dann nach rechts ueberlaufen und den Text der Nachbarspalte ueberdecken. */
.wp-block-image{width:100%;margin:0}
.wp-block-image img{width:100%;height:auto;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-media .wp-block-image img{min-height:560px}

/* Werkkarten der Galerie: Bild und Bildunterschrift in einer weißen Karte */
.wp-block-image.work-card{background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.wp-block-image.work-card img{aspect-ratio:4/5;border-radius:0;box-shadow:none}
.wp-block-image.work-card figcaption{margin:0;padding:1rem 1.15rem 1.3rem;text-align:left;font-size:1rem;color:var(--ink)}
.wp-block-image.work-card .photo-placeholder{aspect-ratio:4/5;min-height:0;border:0;border-radius:0}

/* Schaltflächen */
.wp-block-buttons{margin-top:.6rem;gap:.8rem}
.wp-block-button__link{border-radius:999px;padding:.8rem 1.2rem;font-weight:850;text-decoration:none;background:var(--blue);color:#fff}
.wp-block-button.yellow .wp-block-button__link{background:var(--yellow);color:var(--blue-deep)}
.wp-block-button.dark .wp-block-button__link{background:var(--blue);color:#fff}

/* Zitate: der Zitat-Block wird über seine Klasse angesprochen, damit er die
   Elementregeln für blockquote nicht durch höhere Spezifität aushebelt. */
.wp-block-quote{margin:2rem 0;padding:1rem 0 1rem 1.5rem;border-left:5px solid var(--yellow);font-size:1.35rem;color:var(--blue-deep);font-weight:600}
.wp-block-quote>p:last-of-type{margin-bottom:0}
.blue-panel .wp-block-quote{color:white}
.blue-panel .wp-block-quote cite{color:var(--yellow)}
.opening .wp-block-quote{max-width:720px;margin:2rem auto;text-align:left}

/* Hinweiskästen aus Blockgruppen */
.admin-note *:last-child,.legal-warning *:last-child,.contact-hint *:last-child{margin-bottom:0}

@media(max-width:900px){
  .wp-block-columns.hero,.wp-block-columns.split{grid-template-columns:1fr;gap:30px}
  .hero-media .wp-block-image img{min-height:420px}
}
@media(max-width:600px){
  .hero-media .wp-block-image img{min-height:300px}
}