/* Snaply Magazin — öffentliches Frontend, pixelnah zum Hawthorn/snaply-fr Theme. Gemessene WP-Werte: body weiß, Barlow 16px #222; H1 31px Barlow Semi Condensed w400; Container 1220px; Content 830 + Sidebar 340; Akzent gold var(--mag-gold), Rot var(--mag-red). Farben aus mag_settings via :root-Variablen (Template head()); Default gold var(--mag-gold) / rot var(--mag-red). */ *,*::before,*::after{box-sizing:border-box} html{overflow-x:hidden} body{margin:0;background:#fff;color:#222;font-family:'Barlow',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.7} a{color:var(--mag-gold);text-decoration:none} a:hover{color:var(--mag-gold);text-decoration:underline} img{max-width:100%;height:auto} .sp-container{max-width:1220px;margin:0 auto;padding:0 20px} /* ---------- Header ---------- */ .mag-header{background:#fff;border-bottom:1px solid #eee} .mag-header-top{max-width:1220px;margin:0 auto;padding:22px 20px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center} .mag-social{display:flex;gap:14px} .mag-social a{color:var(--mag-red)} .mag-logo{grid-column:2;justify-self:center;display:block} .mag-logo img{height:110px;width:auto;display:block} .mag-logo:hover{text-decoration:none} .mag-search-btn{grid-column:3;justify-self:end;background:none;border:none;color:var(--mag-red);cursor:pointer;padding:6px} .mag-nav{display:flex;align-items:center;justify-content:center;gap:26px;padding:14px 20px;border-top:2px solid #040404;max-width:1220px;margin:0 auto;flex-wrap:wrap} .mag-nav a{font-family:'Barlow Semi Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#000} .mag-nav a:hover{color:var(--mag-gold);text-decoration:none} .nav-line{width:38px;height:2px;background:#040404;flex:0 0 auto} /* ---------- Breadcrumb ---------- */ .mag-breadcrumb{padding:16px 0 0} .mag-breadcrumb .sp-container{font-size:13px;color:#999} .mag-breadcrumb a{color:var(--mag-gold)} .mag-breadcrumb .sep{margin:0 6px;color:#ccc} .mag-breadcrumb .current{color:#999} /* ---------- Layout: Content + Sidebar ---------- */ .mag-layout{display:flex;gap:40px;align-items:flex-start;padding-top:24px;padding-bottom:40px} .mag-content{flex:1;min-width:0} .mag-sidebar{width:340px;flex:0 0 340px} @media(max-width:960px){.mag-layout{flex-direction:column}.mag-sidebar{width:100%;flex:none}} /* ---------- Artikel ---------- */ .mag-article .post-img{margin:0} .mag-article .post-img img{width:100%;display:block;border-radius:2px} .post-header{background:#fff;width:82%;margin:-62px auto 0;position:relative;z-index:2;padding:32px 26px 22px;text-align:center;box-shadow:0 -2px 14px rgba(0,0,0,.05)} .post-header--nofeat{width:100%;margin:0;padding:8px 0 22px;box-shadow:none} .post-cat a{color:#0096d6;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase} .post-cat a:hover{text-decoration:none;color:var(--mag-gold)} .entry-title{font-family:'Barlow Semi Condensed',sans-serif;font-size:31px;font-weight:400;line-height:1.2;letter-spacing:.5px;color:#000;margin:.5rem 0 0} .post-difficulty{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:14px} .diff-label{color:#0096d6;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase} .diff-icons{display:inline-flex;gap:4px} .sci{color:#ccc;line-height:0} .sci.on{color:#0096d6} .post-content{padding:26px 0 0;font-size:16px;line-height:1.75;color:#222} .post-content p{margin:0 0 1.15rem} .post-content h2{font-family:'Barlow Semi Condensed',sans-serif;font-size:27px;font-weight:700;color:#000;margin:1.9rem 0 .8rem} .post-content h3{font-family:'Barlow Semi Condensed',sans-serif;font-size:23px;font-weight:700;color:#000;margin:1.4rem 0 .6rem} .post-content h4{font-size:20px;font-weight:700;margin:1.2rem 0 .5rem} .post-content a{color:var(--mag-gold)} .post-content ul,.post-content ol{padding-left:26px;margin:0 0 1.15rem} .post-content li{margin-bottom:.4rem} .post-content blockquote{border-left:5px solid #ddd;margin:1.3rem 0;padding:.3rem 0 .3rem 18px;font-size:20px;font-style:italic;color:#888} .post-content img{border-radius:4px} .post-content figure{margin:1.5rem 0;text-align:center} .post-content figure figcaption{font-size:13px;color:#999;font-style:italic;margin-top:6px} /* ⚠️ Diese vier Regeln galten bis 23.09.2026 NUR fuer .post-content (franzoesisches Layout). Im deutschen Layout (.mag-de-entry-content) fehlten damit Zentrierung, Links-/Rechtsbuendigkeit und volle Breite komplett: align-center landete ohne margin:auto am linken Rand, align-left/right hatten keinen float und standen untereinander statt nebeneinander. Aufgefallen ist es erst, als ein Bild schmaler als die Textspalte war (size-s, 460px in 750px) - bei voller Breite sieht man zwischen "links" und "zentriert" keinen Unterschied. */ .post-content figure.align-left,.mag-de-entry-content figure.align-left{float:left;max-width:48%;margin:.3rem 1.4rem 1rem 0} .post-content figure.align-right,.mag-de-entry-content figure.align-right{float:right;max-width:48%;margin:.3rem 0 1rem 1.4rem} .post-content figure.align-center,.mag-de-entry-content figure.align-center{margin-left:auto;margin-right:auto} .post-content figure.align-full img,.mag-de-entry-content figure.align-full img{width:100%} /* Bildgroesse + Ausschnitt fuer Bausteine aus dem Editor (Fund Isah 22.09.2026). Bestandsbilder bringen aus WordPress ihr eigenes width-Attribut mit (haeufigste Masse 660x440 und 715x237) und bleiben deshalb klein. Frisch hochgeladene Bilder hatten gar keine Breitenangabe und zogen sich seit dem Wegfall der Seitenleiste ueber die vollen 1080px der Spalte - ein 1500er Foto stand damit doppelt so gross im Artikel wie alles daneben. Die Regeln greifen ausschliesslich auf figure.align-* = unser Baustein-Format. Der Bestand nutzt wp-block-image bzw. img-Klassen und wird NICHT angefasst. */ /* Standardbild fuellt die Textspalte - wie im Original, wo 715px Bild auf 750px Text kommen. */ .post-content figure.align-center,.mag-de-entry-content figure.align-center{max-width:100%} .post-content figure.align-center.size-s,.mag-de-entry-content figure.align-center.size-s{max-width:460px} /* "gross" ragt beidseitig aus der Textspalte heraus - sonst waere es dasselbe wie "normal". ⚠️ NICHT ueber margin-left:50% loesen: das verkleinert bei einem Block-Element die verfuegbare Breite (gemessen 375px statt 1080px). Mit position:relative + left bleibt das Layout unberuehrt, verschoben wird nur die Darstellung. */ .post-content figure.align-center.size-l,.mag-de-entry-content figure.align-center.size-l{ position:relative;left:50%;transform:translateX(-50%); width:min(1080px,92vw);max-width:none} /* Nebeneinander: der Bestand stellt Schritt-Bilder zu 81 Paaren links/rechts umflossen dar. */ .post-content figure.align-left.size-s,.post-content figure.align-right.size-s, .mag-de-entry-content figure.align-left.size-s,.mag-de-entry-content figure.align-right.size-s{max-width:32%} .post-content figure.align-left.size-l,.post-content figure.align-right.size-l, .mag-de-entry-content figure.align-left.size-l,.mag-de-entry-content figure.align-right.size-l{max-width:60%} /* Ausschnitt: das Bild behaelt seine Datei, nur der sichtbare Teil wird beschnitten. --mag-focus kommt als style-Attribut vom Baustein (zwei Prozentwerte). */ .post-content figure[class*=ratio-] img,.mag-de-entry-content figure[class*=ratio-] img{ width:100%;object-fit:cover;object-position:var(--mag-focus,50% 50%)} /* Rahmen um das Bild. Noetig fuer den Zoom: ein per transform vergroessertes Bild ragt aus seinem Layout-Kasten und wuerde die Bildunterschrift ueberdecken (gemessen 100px bei zweifacher Groesse). overflow:hidden an der figure selbst hilft nicht - die Unterschrift liegt in derselben Box. */ .mag-bildrahmen{display:block;overflow:hidden;line-height:0} /* Zoom: der Fokuspunkt ist der Ursprung, damit die angeklickte Stelle beim Heranruecken im Bild bleibt. Ohne Zoom kostet die Regel nichts (scale(1)). */ /* Zoom um den Fokuspunkt (Stand 23.09.2026, zweite Korrektur). object-position und transform-origin rechnen in VERSCHIEDENEN Systemen: object-position meint Prozent des UEBERHANGS zwischen Bild und Rahmen, transform-origin Prozent der RAHMENBOX. Genau deshalb darf man den Klickprozentsatz nicht einfach in beide schreiben - fokusAusKlick() im Editor rechnet den Wert aus, der beide Effekte zusammen richtig stellt. ⚠️ origin MUSS der Fokus sein, nicht center: bei einem quadratischen Bild in einem quadratischen Rahmen ist der Ueberhang NULL, object-position kann dann gar nichts verschieben - die Verschiebung kommt allein aus transform-origin. Mit origin:center liess sich der Ausschnitt dort nicht mehr waehlen (Isah: "bei quadratisch klappt der Zoom nicht mehr"). */ .post-content figure img,.mag-de-entry-content figure img,.mag-gallery img{ transform:scale(var(--mag-zoom,1));transform-origin:var(--mag-focus,50% 50%)} .post-content figure.ratio-3-2 img,.mag-de-entry-content figure.ratio-3-2 img{aspect-ratio:3/2} .post-content figure.ratio-1-1 img,.mag-de-entry-content figure.ratio-1-1 img{aspect-ratio:1/1} .post-content figure.ratio-16-9 img,.mag-de-entry-content figure.ratio-16-9 img{aspect-ratio:16/9} /* WordPress-Bildraster erhalten (migrierte Artikel: content_html trägt die Original-Struktur, hat aber ohne dieses CSS kein Grid -> Bilder untereinander). Gilt für BEIDE Content-Container: FR = .post-content, DE = .mag-de-entry-content. wp-block-columns = Spalten nebeneinander; wp-block-gallery = verschachteltes Raster. */ .post-content .wp-block-columns,.mag-de-entry-content .wp-block-columns{display:flex;flex-wrap:wrap;gap:14px;margin:1.5rem 0;align-items:flex-start} .post-content .wp-block-column,.mag-de-entry-content .wp-block-column{flex:1 1 0;min-width:0} .post-content .wp-block-column>figure,.mag-de-entry-content .wp-block-column>figure{margin:0} /* Gallery: default = 2-spaltig (die meisten migrierten Galerien haben 2 Bilder; auto-fit-minmax kollabierte bei nur 2 Bildern zu einer Spalte). */ .post-content .wp-block-gallery,.mag-de-entry-content .wp-block-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:1.5rem 0} .post-content .wp-block-gallery.columns-1,.mag-de-entry-content .wp-block-gallery.columns-1{grid-template-columns:1fr} .post-content .wp-block-gallery.columns-2,.mag-de-entry-content .wp-block-gallery.columns-2{grid-template-columns:repeat(2,1fr)} .post-content .wp-block-gallery.columns-3,.mag-de-entry-content .wp-block-gallery.columns-3{grid-template-columns:repeat(3,1fr)} .post-content .wp-block-gallery.columns-4,.mag-de-entry-content .wp-block-gallery.columns-4{grid-template-columns:repeat(4,1fr)} .post-content .wp-block-gallery>figure,.mag-de-entry-content .wp-block-gallery>figure{margin:0} /* Grid-Zellen: das innere figure ist das Item; Bild füllt die Zellenbreite (Höhe auto, damit unterschiedliche Seitenverhältnisse nicht abgeschnitten/verzerrt werden). */ .post-content .wp-block-gallery .wp-block-image,.mag-de-entry-content .wp-block-gallery .wp-block-image{margin:0} .post-content .wp-block-gallery img,.mag-de-entry-content .wp-block-gallery img{width:100%;height:auto;display:block;border-radius:5px} @media(max-width:600px){ .post-content .wp-block-columns,.mag-de-entry-content .wp-block-columns{gap:10px} .post-content .wp-block-column,.mag-de-entry-content .wp-block-column{flex-basis:calc(50% - 5px)} } /* Content-Blöcke */ .mag-gruss{margin:1.4rem 0 1.8rem;line-height:1.6} .mag-material{background:#f8f8f8;border-left:4px solid var(--mag-gold);padding:1rem 1.3rem;border-radius:4px;margin:1.5rem 0} .mag-material h3{margin:.2rem 0 .6rem;font-size:19px} /* Benoetigte Menge fuers Projekt - steht vor dem Material, leicht hervorgehoben, damit die Leserin sie nicht mit der Packungsgroesse im Shop verwechselt. */ .mag-material-menge{font-weight:600;white-space:nowrap} .mag-cta{text-align:center;margin:1.7rem 0} .article-btn{display:inline-block;background:var(--mag-red);color:#fff;padding:12px 28px;border-radius:5px;font-weight:600;letter-spacing:.5px} .article-btn:hover{background:#a00c26;text-decoration:none;color:#fff} .article-btn--secondary{background:var(--mag-gold)}.article-btn--secondary:hover{background:#a98a56} .article-btn--outline{background:transparent;color:var(--mag-red);border:2px solid var(--mag-red)} .mag-infobox{background:#eef6ff;border:1px solid #b9d6f2;border-radius:8px;padding:1rem 1.2rem;margin:1.5rem 0} .mag-gallery{display:grid;gap:8px;margin:1.5rem 0} /* Eine Spalte = Einzelbild. Auf Textbreite begrenzen, sonst laeuft es wie frueher ueber die vollen 1080px der Spalte. */ .mag-gallery.gcols-1{grid-template-columns:1fr} .mag-gallery.gcols-2{grid-template-columns:repeat(2,1fr)} .mag-gallery.gcols-3{grid-template-columns:repeat(3,1fr)} .mag-gallery.gcols-4{grid-template-columns:repeat(4,1fr)} .mag-gallery figure{margin:0} .mag-gallery img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block; /* ⚠️ object-position MUSS hier stehen (Regression 22.09., gefunden 23.09.). Vor dem Zoom-Umbau setzte der Renderer den Fokus direkt als style="object-position:…" ans Bild. Beim Umbau wanderte er in die Variable --mag-focus - gelesen wurde die aber nur von transform-origin. Folge: in der Bilderstrecke wirkte der Fokus NUR beim Zoom, der Ausschnitt blieb stur mittig. Isahs Fall: Fokus 18%, sichtbar war trotzdem Bildbereich 340..840 statt 180..680 - das Gesicht fiel raus. */ object-position:var(--mag-focus,50% 50%)} /* Einheitliches Format je Kachel (Fund Isah 22.09.2026). Ohne Hoehe an der Kachel lief das height:100% oben ins Leere: die Rasterzeile wurde so hoch wie das hoechste Bild und riss alle anderen mit (gemessen 1601px bei einem Hochkant-Bild in der Reihe). Das Originalmagazin beschneidet ebenfalls praktisch immer - 97% der dortigen Galerien tragen is-cropped. 3:2 ist Standard, weil 660x440 das haeufigste Mass im Bestand ist. */ .mag-gallery.gal-3-2 figure{aspect-ratio:3/2} .mag-gallery.gal-1-1 figure{aspect-ratio:1/1} .mag-gallery.gal-4-3 figure{aspect-ratio:4/3} /* gal-orig: bewusst ohne Format - dann behaelt jedes Bild seine eigene Hoehe. Damit dabei nicht wieder alle auf die hoechste Kachel gestreckt werden, richtet sich die Zeile hier nach dem Inhalt statt zu dehnen. */ .mag-gallery.gal-orig{align-items:start} .mag-gallery.gal-orig img{height:auto;object-fit:contain} /* Bildunterschrift darf die Kachelhoehe nicht sprengen. */ .mag-gallery figure{display:flex;flex-direction:column} /* Der Rahmen traegt jetzt die Hoehe, nicht mehr das Bild selbst. */ .mag-gallery figure>.mag-bildrahmen{flex:1;min-height:0} .mag-gallery figure img{height:100%;min-height:0} .mag-gallery figcaption{font-size:12px;color:#999;font-style:italic;margin-top:4px;text-align:center} .mag-video{position:relative;padding-bottom:56.25%;height:0;margin:1.5rem 0;border-radius:6px;overflow:hidden} .mag-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Standbild statt Player (Fund Isah 25.09.2026): YouTube waehlt sein Vorschaubild selbst und nimmt bei kleineren Einbettungen hqdefault - 4:3, im 16:9-Rahmen beschnitten. Wir zeigen maxresdefault und laden den Player erst beim Klick. */ .mag-video-link{position:absolute;inset:0;display:block;background:#000;cursor:pointer} .mag-video-bild{width:100%;height:100%;object-fit:contain;display:block} .mag-video-knopf{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px; border-radius:12px;background:rgba(0,0,0,.72);transition:background .15s ease} .mag-video-knopf::after{content:'';position:absolute;left:26px;top:13px;border-style:solid; border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff} .mag-video-link:hover .mag-video-knopf,.mag-video-link:focus-visible .mag-video-knopf{background:#c80f31} .mag-video-link:focus-visible{outline:3px solid #0096d6;outline-offset:2px} /* Instagram-Reel (Klick laedt den Instagram-Player). Eigene Klasse statt .mag-video: dessen 16:9-Rahmen (padding-bottom) wuerde ein Hochformat-Reel beschneiden. */ .mag-insta{position:relative;width:min(100%,400px);aspect-ratio:9/14;margin:1.5rem auto;border-radius:10px;overflow:hidden; background:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 45%,#6228d7 100%)} .mag-insta:not(.mag-video--vorschau){aspect-ratio:400/880;background:#fff;border:1px solid #dbdbdb} .mag-insta iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .mag-insta .mag-video-link{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;background:transparent;color:#fff;text-decoration:none} .mag-de-entry-content .mag-insta a,.post-content .mag-insta a{color:#fff;text-decoration:none} .mag-insta-logo{position:relative;width:64px;height:64px;border:5px solid #fff;border-radius:18px;box-sizing:border-box} .mag-insta-logo::before{content:'';position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border:5px solid #fff;border-radius:50%;box-sizing:border-box} .mag-insta-logo::after{content:'';position:absolute;right:6px;top:6px;width:6px;height:6px;background:#fff;border-radius:50%} .mag-insta-name{font-weight:600;font-size:18px;letter-spacing:.3px} .mag-insta-play{width:56px;height:56px;line-height:56px;text-align:center;border-radius:50%;background:rgba(0,0,0,.35);font-size:22px;transition:background .15s} .mag-insta-link:hover .mag-insta-play,.mag-insta-link:focus-visible .mag-insta-play{background:rgba(0,0,0,.6)} /* Mit Startbild: Hochformat 9:16 wie das Reel, Bild fuellt die Karte, kleines Logo oben links */ .mag-insta--bild{aspect-ratio:9/16;background:#000} .mag-insta-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* Knopf unten statt mittig: Reels tragen ihren Titeltext meist in der Bildmitte */ .mag-insta--bild .mag-video-link{justify-content:flex-end;padding-bottom:28px} .mag-insta--bild .mag-insta-play{position:relative;background:rgba(0,0,0,.45)} .mag-insta-marke{position:absolute;left:12px;top:12px;width:40px;height:40px;border-radius:11px; background:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 45%,#6228d7 100%);display:flex;align-items:center;justify-content:center} .mag-insta-marke .mag-insta-logo{width:26px;height:26px;border-width:3px;border-radius:8px} .mag-insta-marke .mag-insta-logo::before{width:10px;height:10px;margin:-5px 0 0 -5px;border-width:2.5px} .mag-insta-marke .mag-insta-logo::after{right:2px;top:2px;width:3px;height:3px} @media (prefers-reduced-motion: reduce){.mag-video-knopf{transition:none}} #schwierigkeitsgrad{color:#0096d6;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:center} /* ---------- Autoren-Übersicht + Detailseite ---------- */ .mag-authors-page,.mag-author-detail,.mag-termindex{max-width:1140px;margin:0 auto;padding:30px 20px 50px} .mag-termindex-tiles{grid-template-columns:repeat(3,1fr)!important;gap:12px} @media(max-width:700px){.mag-termindex-tiles{grid-template-columns:repeat(2,1fr)!important}} .mag-authors-title{font-family:'Barlow Semi Condensed',sans-serif;font-size:30px;font-weight:600;color:#0096d6;text-transform:uppercase;letter-spacing:.5px;margin:0 0 28px} .mag-authors-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:26px 18px} .mag-author-card{display:flex;flex-direction:column;align-items:center;text-align:center;color:#444} .mag-author-card:hover{text-decoration:none} .mag-author-avatar{width:130px;height:130px;border-radius:50%;background:#f2f2f2 center/cover no-repeat;display:block;margin-bottom:10px;border:1px solid #eee;transition:transform .15s} .mag-author-card:hover .mag-author-avatar{transform:scale(1.04)} .mag-author-avatar--empty{background:#f2f2f2 center/40% no-repeat} .mag-author-name{font-weight:700;font-size:16px;color:#333} .mag-author-brand{font-size:13px;color:#c3a26e;margin-top:2px} /* Detailseite: Bio+Foto+Website links, Artikel-Grid rechts */ .mag-author-detail-head{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:start} .mag-author-detail-info{display:flex;flex-direction:column;gap:16px} .mag-author-detail-avatar{width:160px;height:160px;border-radius:50%;background:#f2f2f2 center/cover no-repeat} .mag-author-detail-bio{font-size:15px;line-height:1.6;color:#444} .mag-author-detail-web{align-self:flex-start} /* Bug #293: .mag-de-grid (display:flex, Zeile weiter unten) gewann sonst gegen dieses Grid -> Kacheln unterschiedlich hoch/versetzt. Hoehere Spezifitaet erzwingt das Raster. */ .mag-author-detail-posts.mag-de-grid,.mag-author-detail-posts{display:grid; grid-template-columns:repeat(4,1fr);gap:22px 2%;margin-top:0} .mag-author-detail-posts .mag-de-card{width:auto;margin:0} @media(max-width:900px){ .mag-authors-grid{grid-template-columns:repeat(3,1fr)} .mag-author-detail-head{grid-template-columns:1fr} .mag-author-detail-posts.mag-de-grid,.mag-author-detail-posts{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .mag-authors-grid{grid-template-columns:repeat(2,1fr)} .mag-author-avatar{width:100px;height:100px} } /* ---------- Such-Overlay (statische Client-Suche) ---------- */ .mag-search-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px} .mag-search-ov[hidden]{display:none} .mag-search-box{background:#fff;border-radius:10px;width:min(640px,100%);max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative} #mag-search-in{border:none;border-bottom:2px solid #eee;font-size:20px;padding:20px 50px 20px 24px;outline:none;font-family:inherit} #mag-search-in:focus{border-bottom-color:#0096d6} .mag-search-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:28px;color:#999;cursor:pointer;line-height:1} .mag-search-res{overflow-y:auto;padding:6px 0} .mag-search-hit{display:flex;gap:12px;align-items:center;padding:10px 24px;color:#333;border-bottom:1px solid #f4f4f4} .mag-search-hit:hover{background:#f7fbfe;text-decoration:none} .mag-search-thumb{width:52px;height:52px;flex:0 0 52px;border-radius:5px;background:#eee center/cover no-repeat} .mag-search-hit b{display:block;font-size:15px;color:#0096d6} .mag-search-hit small{color:#888;font-size:13px} .mag-search-none{padding:24px;color:#999;text-align:center} /* ---------- Sidebar-Widgets ---------- */ .mag-widget{margin-bottom:34px} .widget-title{background:#040404;color:#fff;font-family:'Barlow Semi Condensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;text-align:center;padding:11px;margin:0 0 16px} .sw-recent-item{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:#222} .sw-recent-item:hover{text-decoration:none} .sw-num{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#040404;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center} .sw-thumb{width:60px;height:60px;flex:0 0 60px;background:#eee center/cover no-repeat;border-radius:3px} .sw-info{display:flex;flex-direction:column} .sw-title{font-family:'Barlow Semi Condensed',sans-serif;font-size:15px;font-weight:600;color:#000;line-height:1.25} .sw-date{font-size:12px;color:#999;font-style:italic;margin-top:2px} .sw-cats{list-style:none;margin:0;padding:0} .sw-cats li{border-bottom:1px solid #eee} .sw-cats a{display:block;padding:8px 0;color:#444;font-size:14px} .sw-cats a:hover{color:var(--mag-gold);text-decoration:none} .mag-widget--nl{background:#f8f8f8;padding:18px;border-radius:6px} .mag-widget--nl .widget-title{margin-top:0} .mag-widget--nl p{font-size:14px;color:#666;margin:0 0 12px} .sw-nl{display:flex;flex-direction:column;gap:8px} .sw-nl input{padding:9px 11px;border:1px solid #ccc;border-radius:5px;font-size:14px} .sw-nl button{padding:10px;background:var(--mag-red);color:#fff;border:none;border-radius:5px;font-weight:600;cursor:pointer} /* ---------- Card-Grid (Archiv + Startseite) ---------- */ .mag-archive-head{background:#f8f8f8;padding:34px 0;text-align:center;margin-top:8px} .mag-archive-head .kicker{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mag-gold)} .mag-archive-head h1{font-family:'Barlow Semi Condensed',sans-serif;font-size:34px;color:#000;margin:.3rem 0 0} .mag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px} .mag-card{background:#fff;border:1px solid #f0f0f0;border-radius:6px;overflow:hidden;color:#222;display:flex;flex-direction:column;box-shadow:0 1px 4px rgba(0,0,0,.05)} .mag-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);text-decoration:none} .mag-card-img{height:180px;background:#eee center/cover no-repeat;position:relative} .mag-card-cat{position:absolute;bottom:0;left:0;background:#0096d6;color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 10px} .mag-card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column} .mag-card-body h3{font-family:'Barlow Semi Condensed',sans-serif;font-size:20px;font-weight:600;color:#000;margin:0 0 8px;line-height:1.25} .mag-card-body p{font-size:14px;color:#666;margin:0;flex:1} .mag-card-more{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mag-gold)} .mag-empty{color:#999;text-align:center;padding:40px} /* Startseite Hero */ .mag-hero{display:block;position:relative;border-radius:8px;overflow:hidden;margin-bottom:26px;color:#fff} .mag-hero:hover{text-decoration:none} .mag-hero-img{height:380px;background:#ddd center/cover no-repeat} .mag-hero-body{position:absolute;left:0;right:0;bottom:0;padding:26px;background:linear-gradient(transparent,rgba(0,0,0,.75))} .mag-hero-body h2{font-family:'Barlow Semi Condensed',sans-serif;font-size:30px;font-weight:600;color:#fff;margin:0 0 6px} /* ---------- Footer ---------- */ .mag-footer{background:#040404;color:#bbb;margin-top:40px;padding:46px 0 30px} .mag-footer .sp-container{text-align:center} .mag-footer-logo{font-family:'Barlow Semi Condensed',sans-serif;font-size:26px;font-weight:700;color:#fff;display:inline-block;margin-bottom:16px} .mag-footer-logo:hover{text-decoration:none} .mag-footer-nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:14px} .mag-footer-nav a{color:#ccc;font-size:13px;text-transform:uppercase;letter-spacing:1px} .mag-footer-social{display:flex;gap:16px;justify-content:center;margin-bottom:16px} .mag-footer-social a{color:#999} .mag-copy{color:#777;font-size:12px} @media(max-width:767px){ .mag-logo{font-size:24px} .post-header{width:94%;margin-top:-40px;padding:24px 18px 18px} .entry-title{font-size:26px} .post-content figure.align-left,.post-content figure.align-right, .mag-de-entry-content figure.align-left,.mag-de-entry-content figure.align-right{float:none;max-width:100%;margin:1.3rem 0} /* Auf dem Handy immer volle Breite - auch gegen die size-Klassen des Editors. Gleiche Spezifitaet wie .post-content figure.align-x.size-y, steht aber spaeter in der Datei und gewinnt damit. */ .post-content figure[class*=align-][class*=size-], .mag-de-entry-content figure[class*=align-][class*=size-]{float:none;max-width:100%} .mag-hero-img{height:240px} /* Bilderstrecke: auf dem Handy hoechstens zwei Spalten - bei drei blieben je Bild nur 105x70 px uebrig, da erkennt niemand einen Naeharbeitsschritt. */ .mag-gallery.gcols-3,.mag-gallery.gcols-4{grid-template-columns:repeat(2,1fr)} } /* ============================================================================ DE-MAGAZIN (Theme "foodica") — pixelnah zum echten magazin.snaply.de. Alles unter body.mag-de-page gescoped, damit das FR-Design (hawthorn) unberührt bleibt. Gemessene Live-Werte: Font Lato; Body-Text #685f5b 16px/1.6; Primär türkis #0096d6; Shop-Rot #c80f31; Section-Titles #0096d6 30px w300 uppercase; Nav-Band #0096d6 weiß; Container 1140px (max 1300 mit 80px Rand); Content 750 + Sidebar 342 (Gap 48). ============================================================================ */ body.mag-de-page{font-family:'Lato',system-ui,-apple-system,sans-serif;color:#685f5b;font-size:16px;line-height:1.6} body.mag-de-page a{color:#0096d6;text-decoration:none} body.mag-de-page a:hover{color:#685f5b;text-decoration:none} /* Bug #283/#292: Buttons behalten ihre eigene Textfarbe. body.mag-de-page a (Spezifitaet 0,1,2) schlug .mag-de-shop und .article-btn (je 0,1,0) -> roter Button mit blauem Text, im Hover braun. Quellreihenfolge half nicht, nur hoehere Spezifitaet. REGEL (Daniela/Simon): JEDE farbige Box bekommt weissen Text - rote wie blaue. NEUE Button-Klasse auf DE-Seiten? Hier eintragen, sonst faerbt die Link-Regel sie um; das ist beim Knopf "Alle Naehideen anzeigen" (#286) prompt passiert. Betrifft nur Klassen, die auf einem sitzen -