/* ============================================================================
ALENA DITTRICH PHOTOGRAPHY — portables Design-System (1:1)
Einbinden:
Coaching-Palette (Freebies für Fotografinnen):
Doku: https://www.alena-dittrich.com/admin/design-system.md
Quelle der Wahrheit: Website-Stylesheet + insta-templates — hier zusammengeführt.
HINWEIS Marken-Pflege: Parisienne-Script & Rauten-Divider sind ALT-Bestand und
sollen vermieden werden → stattdessen Cormorant kursiv (.quote) & runde Punkte (.divider__dot).
============================================================================ */
/* ============================================================================
ALENA DITTRICH PHOTOGRAPHY — Design System
„Babyfotografie bei Alena D."
Kern-Stylesheet: Fonts (self-hosted) · Design-Tokens · Basis-Komponenten
Jede Design, die der Agent baut, erhält NUR den @import-Verbund dieser Datei.
============================================================================ */
/* ------------------------------------------------------------------ Fonts -- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=Jost:wght@300;400;500&family=Parisienne&display=swap');
/* ----------------------------------------------------------------- Tokens -- */
:root {
/* — Flächen / Surfaces — hell, „fast weißes Papier mit einem Hauch Wärme" */
--paper: #FAF8F4; /* Seitenhintergrund — Grundfläche */
--card: #FFFEFC; /* Karten, erhabene Flächen */
--inset: #F3EEE6; /* eingelassene Felder, Quotes, Foto-Rahmen */
--sand: #E9DFD0; /* dezente Füllung, seltene Flächenakzente */
/* — Erdskala / Earth scale — */
--clay: #C3AE97;
--mocha: #9A8168;
--espresso: #5E4B3B; /* HAUPT-AKZENT */
--espresso-deep: #4A3A2C;
/* — Tanne — natürlicher grüner Akzent — */
--fir: #4A5F50; /* Tannengrün — Akzent-Buttons, Badges */
--fir-deep: #38493D; /* Hover · Text auf Fir-Soft */
--fir-soft: #E4E9E1; /* zarte grüne Tint-Fläche */
/* — Blush — seltener femininer Akzent — */
--blush: #E8CFC1;
--blush-deep: #CBA491;
/* — Text — */
--ink: #2E2620; /* Headlines, Primärtext */
--ink-soft: #6E6154; /* Fließtext */
--ink-mute: #9C9081; /* Meta, Labels, Captions */
--on-dark: #FAF7F1; /* Text auf dunklen (Espresso-)Flächen */
--on-dark-soft: #D9CFC0; /* Sekundärtext auf Dunkel */
/* — Linien — haarfein, nie reines Schwarz — */
--line: #EAE3D8; /* haarfeine Trennlinie */
--line-strong: #D5C9B8; /* betonte Linie, Rahmen */
/* — Typografie — */
--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
--font-script: "Parisienne", "Snell Roundhand", cursive;
--fw-body: 300; /* Jost Light — Fließtext */
--fw-body-mid: 400;
--fw-ui: 400;
--fw-display: 500; /* Cormorant Medium — Headlines */
/* Type-Skala (Desktop-Basis) */
--fs-eyebrow: 0.72rem;
--fs-caption: 0.82rem;
--fs-body: 1.02rem;
--fs-lead: 1.18rem;
--fs-h4: 1.5rem;
--fs-h3: 2rem;
--fs-h2: 2.7rem;
--fs-h1: 3.6rem;
--fs-display: 4.8rem;
--lh-tight: 1.08;
--lh-snug: 1.28;
--lh-body: 1.62;
--ls-eyebrow: 0.3em; /* weit gesperrte Versalien */
--ls-label: 0.22em;
--ls-button: 0.2em;
--ls-tight: -0.01em;
/* — Spacing-Skala (8er-Grid, ruhig, viel Weißraum) — */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* — Radien — 3–14px + Pill — */
--radius-xs: 3px;
--radius-sm: 6px;
--radius-md: 9px;
--radius-lg: 14px;
--radius-pill: 999px;
/* — Schatten — diffus, warm (Espresso-getönt, nie kühles Grau) — */
--shadow-xs: 0 1px 2px rgba(74, 58, 44, 0.05);
--shadow-sm: 0 4px 14px rgba(74, 58, 44, 0.06);
--shadow-md: 0 10px 30px rgba(74, 58, 44, 0.08), 0 2px 6px rgba(74, 58, 44, 0.04);
--shadow-lg: 0 24px 60px rgba(74, 58, 44, 0.12), 0 6px 16px rgba(74, 58, 44, 0.06);
--shadow-inset: inset 0 1px 2px rgba(74, 58, 44, 0.05);
/* — Bewegung — ruhig — */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur: 320ms;
--dur-fast: 180ms;
/* — Layout — */
--measure: 62ch; /* ideale Lesebreite */
--container: 1120px;
}
/* -------------------------------------------------------------- Base/Reset - */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--paper);
color: var(--ink-soft);
font-family: var(--font-body);
font-weight: var(--fw-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: var(--fw-display);
color: var(--ink);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin: 0 0 0.4em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--espresso); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
/* ---------------------------------------------------------- Text-Utilities - */
.display { font-family: var(--font-display); font-weight: var(--fw-display);
font-size: var(--fs-display); line-height: var(--lh-tight);
letter-spacing: var(--ls-tight); color: var(--ink); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--ink-soft); }
.caption { font-size: var(--fs-caption); color: var(--ink-mute); }
.script { font-family: var(--font-script); font-weight: 400; color: var(--espresso);
font-size: 1.9rem; line-height: 1; }
/* Eyebrow / Label — weit gesperrte Versalien */
.eyebrow {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--mocha);
}
.eyebrow--ink { color: var(--ink-mute); }
.eyebrow--onDark { color: var(--on-dark-soft); }
/* ------------------------------------------------------------------ Button - */
.btn {
--btn-bg: var(--espresso);
--btn-fg: var(--on-dark);
--btn-bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
font-family: var(--font-body); font-weight: 400;
font-size: 0.8rem; letter-spacing: var(--ls-button); text-transform: uppercase;
padding: 0.95em 1.9em;
border-radius: var(--radius-pill);
background: var(--btn-bg); color: var(--btn-fg);
border: 1px solid var(--btn-bd);
cursor: pointer; text-decoration: none;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
box-shadow: var(--shadow-xs);
}
.btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn--primary { --btn-bg: var(--fir); --btn-fg: var(--on-dark); }
.btn--primary:hover { --btn-bg: var(--fir-deep); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--espresso); --btn-bd: var(--line-strong); box-shadow: none; }
.btn--secondary:hover { --btn-bg: var(--inset); --btn-bd: var(--mocha); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fir-deep); --btn-bd: transparent;
box-shadow: none; padding-inline: 0.6em; }
.btn--ghost:hover { --btn-bg: transparent; color: var(--fir); transform: none; }
.btn--ghost::after { content: "→"; transition: transform var(--dur) var(--ease); }
.btn--ghost:hover::after { transform: translateX(3px); }
.btn--onDark { --btn-bg: var(--on-dark); --btn-fg: var(--espresso); }
.btn--onDark:hover { --btn-bg: #fff; }
/* Tannengrün — natürlicher Akzent-Button (sparsam einsetzen) */
.btn--fir { --btn-bg: var(--fir); --btn-fg: var(--on-dark); }
.btn--fir:hover { --btn-bg: var(--fir-deep); }
.btn--firOutline { --btn-bg: transparent; --btn-fg: var(--fir-deep); --btn-bd: var(--fir); box-shadow: none; }
.btn--firOutline:hover { --btn-bg: var(--fir-soft); --btn-bd: var(--fir-deep); }
/* ------------------------------------------------------------------- Badge - */
.badge {
display: inline-flex; align-items: center; gap: 0.5em;
font-family: var(--font-body); font-weight: 400;
font-size: 0.66rem; letter-spacing: var(--ls-label); text-transform: uppercase;
padding: 0.5em 0.95em; border-radius: var(--radius-pill);
background: var(--inset); color: var(--mocha);
border: 1px solid var(--line);
}
.badge--solid { background: var(--espresso); color: var(--on-dark); border-color: transparent; }
.badge--blush { background: var(--blush); color: var(--espresso-deep); border-color: transparent; }
.badge--soft { background: transparent; color: var(--ink-mute); border-color: var(--line-strong); }
.badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.7; }
/* -------------------------------------------------------------------- Card - */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-6);
}
.card--inset { background: var(--inset); box-shadow: var(--shadow-inset); border-color: transparent; }
.card--flat { box-shadow: none; }
/* ----------------------------------------------------------------- Divider - */
.divider { display: flex; align-items: center; gap: var(--space-4); color: var(--line-strong); }
.divider::before, .divider::after {
content: ""; flex: 1; height: 1px; background: var(--line);
}
.divider__rhombus { width: 7px; height: 7px; transform: rotate(45deg);
border: 1px solid var(--mocha); background: transparent; flex: none; }
.divider__rhombus--fill { background: var(--clay); border-color: var(--clay); }
/* ---------------------------------------------------- Foto-Platzhalter ----- */
.photo {
position: relative; border-radius: var(--radius-md); overflow: hidden;
background-color: var(--inset);
background-image: repeating-linear-gradient(
45deg, transparent 0, transparent 9px,
rgba(154, 129, 104, 0.10) 9px, rgba(154, 129, 104, 0.10) 10px);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
min-height: 160px;
}
.photo__label {
font-family: var(--font-body); font-weight: 400; font-size: 0.68rem;
letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-mute);
background: var(--card); padding: 0.5em 1em; border-radius: var(--radius-pill);
border: 1px solid var(--line);
}
/* ------------------------------------------------------- Surfaces / Dunkel - */
.on-espresso {
background: var(--espresso); color: var(--on-dark);
}
.on-espresso h1, .on-espresso h2, .on-espresso h3, .on-espresso h4 { color: var(--on-dark); }
.on-espresso .eyebrow { color: var(--on-dark-soft); }
/* ------------------------------------------ Instagram / Social Canvas ----- */
/* Maßstabsgetreue Bühnen. Post = 1080×1350 (4:5), Story = 1080×1920 (9:16).
Innen-Padding & Type in % / em, damit 1:1 auf Exportgröße hochskalierbar. */
.ig {
position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
background: var(--paper); color: var(--ink-soft);
border-radius: 10px;
}
.ig--post { width: 432px; height: 540px; } /* 0.4× von 1080×1350 */
.ig--story { width: 320px; height: 569px; } /* ~0.296× von 1080×1920 */
.ig--esp { background: var(--espresso); color: var(--on-dark); }
.ig--inset { background: var(--inset); }
.ig__pad { position: absolute; inset: 0; padding: 40px; display: flex; flex-direction: column; }
.ig--story .ig__pad { padding: 34px 30px; }
.ig__eyebrow { font-family: var(--font-body); font-weight: 400; font-size: 0.62rem;
letter-spacing: 0.3em; text-transform: uppercase; color: var(--mocha); }
.ig--esp .ig__eyebrow { color: var(--on-dark-soft); }
.ig__h { font-family: var(--font-display); font-weight: 500; line-height: 1.06;
letter-spacing: -0.01em; color: var(--ink); }
.ig--esp .ig__h { color: var(--on-dark); }
.ig__script { font-family: var(--font-script); color: var(--espresso); line-height: 1; }
.ig--esp .ig__script { color: var(--blush); }
.ig__wreath { background: var(--espresso);
-webkit-mask: url(https://www.alena-dittrich.com/assets/images/wreath.png) center/contain no-repeat;
mask: url(https://www.alena-dittrich.com/assets/images/wreath.png) center/contain no-repeat; }
.ig--esp .ig__wreath { background: var(--on-dark); }
.ig__pill { display: inline-flex; align-items: center; gap: 0.5em; align-self: flex-start;
font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
padding: 0.85em 1.6em; border-radius: var(--radius-pill); background: var(--espresso); color: var(--on-dark); }
.ig--esp .ig__pill { background: var(--on-dark); color: var(--espresso); }
.ig__rh { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--clay); }
/* Foto-Fläche innerhalb einer Bühne */
.ig__photo { background-color: var(--sand);
background-image: repeating-linear-gradient(45deg, transparent 0 11px, rgba(94,75,59,.09) 11px 12px);
display: flex; align-items: center; justify-content: center; }
.ig__photo .photo__label { font-size: 0.6rem; }
/* Foto-Slide mit Text-Overlay (Karussell-Baukasten) */
.ig__bleed { position: absolute; inset: 0; }
.ig__bleed .ig__photo { position: absolute; inset: 0; }
.ig__scrim { position: absolute; inset: 0;
background: linear-gradient(to top, rgba(46,38,32,.78) 0%, rgba(46,38,32,.30) 34%, rgba(46,38,32,0) 62%); }
.ig__scrim--full { background: linear-gradient(to top, rgba(46,38,32,.66), rgba(46,38,32,.42)); }
.ig__scrim--top { background: linear-gradient(to bottom, rgba(46,38,32,.55), rgba(46,38,32,0) 40%); }
.ig__over { position: absolute; inset: 0; padding: 32px; display: flex; flex-direction: column; color: #fff; }
.ig__over .ig__h { color: #fff; }
.ig__over .ig__eyebrow { color: rgba(255,255,255,.82); }
.ig__num { position: absolute; top: 22px; right: 26px; font-family: var(--font-body);
font-size: 0.64rem; letter-spacing: 0.16em; color: rgba(255,255,255,.9); }
.ig__dots { display: flex; gap: 5px; }
.ig__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.45); }
.ig__dots i.on { background: #fff; width: 16px; border-radius: 3px; }
/* Reihe zum Präsentieren mehrerer Bühnen (Karussell) */
.ig-strip { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.ig-slidewrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ig-slidewrap .n { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
/* --------------------------------------------------- Design-System-Karten -- */
/* Rahmen für die Vorschau-Karten im Design-System-Pane (nicht Teil der Marke) */
.ds-frame { padding: 40px; background: var(--paper); font-family: var(--font-body); }
.ds-stack > * + * { margin-top: var(--space-5); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.ds-note { font-size: var(--fs-caption); color: var(--ink-mute); max-width: var(--measure); }
.ds-label { font-size: 0.64rem; letter-spacing: var(--ls-label); text-transform: uppercase;
color: var(--ink-mute); margin-bottom: var(--space-2); display: block; }
/* ======================================================================
ERGÄNZUNGEN (portable Version)
====================================================================== */
/* ---- Divider, bevorzugte Variante: runder Punkt statt Raute ---- */
.divider__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); flex: none; }
.hr, hr { border: none; height: 1px; background: var(--line); margin: 2em 0; }
.hr--kurz { width: 120px; margin-left: 0; }
/* ---- Logo & Kranz (recolorbar über background-Farbe) ---- */
.logo-img { width: 140px; } /* Original-PNG, nur auf hellen Flächen */
.logo-mask, .wreath {
width: 120px; height: 120px; background: var(--espresso);
-webkit-mask: url(https://www.alena-dittrich.com/assets/images/logo-full.png) center/contain no-repeat;
mask: url(https://www.alena-dittrich.com/assets/images/logo-full.png) center/contain no-repeat;
}
.wreath {
-webkit-mask-image: url(https://www.alena-dittrich.com/assets/images/wreath.png);
mask-image: url(https://www.alena-dittrich.com/assets/images/wreath.png);
}
.logo-mask--light, .wreath--light { background: var(--on-dark); }
.logo-mask--fir { background: var(--fir); }
/* ---- Feine Aufzählung (Freebie-Stil, statt Standard-Bullets) ---- */
ul.fine { list-style: none; margin: 1em 0; padding: 0; }
ul.fine li { position: relative; padding-left: 1.6em; margin-bottom: 0.55em; }
ul.fine li::before { content: ""; position: absolute; left: 0; top: 0.55em;
width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--clay); }
/* ---- Nummern-Kreis (Anleitungen, Chips) ---- */
.num { display: inline-flex; align-items: center; justify-content: center;
width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--fir); color: #fff;
font-family: var(--font-display); font-size: 1.1rem; line-height: 1;
font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
/* ---- Zitat & Hinweisfläche ---- */
.quote { font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 1.35rem; line-height: 1.4; color: var(--ink); }
.tip { background: var(--fir-soft); color: var(--fir-deep); border-radius: var(--radius-lg);
padding: 1em 1.4em; }
/* ---- Botanischer Ecken-Akzent (Eukalyptus-Linienzeichnung) ---- */
.botanic { display: block; width: 200px; height: 160px; opacity: 0.85;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
/* ---- Instagram-Slide-Familien (1080×1350 · aus insta-templates 1:1) ---- */
.slide { width: 1080px; height: 1350px; background: var(--paper); position: relative;
font-family: var(--font-body); font-weight: 300; color: var(--ink-soft); overflow: hidden;
display: flex; flex-direction: column; padding: 90px 84px; }
.slide h1 { font-size: 104px; line-height: 1.06; margin-top: 34px; }
.slide .eyebrow { font-size: 26px; }
.slide .body { font-size: 37px; line-height: 1.6; }
.slide .foot { position: absolute; left: 84px; right: 84px; bottom: 64px; display: flex;
justify-content: space-between; align-items: center; font-size: 24px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); z-index: 3; }
.slide .swipe { font-family: var(--font-display); font-style: italic; text-transform: none;
letter-spacing: 0.02em; font-size: 34px; color: var(--espresso); }
.slide .photo-full { position: absolute; inset: 0; }
.slide .photo-full img { width: 100%; height: 100%; object-fit: cover; }
.fcover .photo-scrim { position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(46,38,32,.10) 30%, rgba(46,38,32,.72) 100%); }
.fcover .cap { position: absolute; left: 84px; right: 84px; bottom: 150px; color: #fff; }
.fcover .cap h1 { color: #fff; font-size: 96px; text-shadow: 0 2px 34px rgba(0,0,0,.4); }
.fcover .cap .eyebrow { color: var(--blush); }
.fcover .foot { color: rgba(255,255,255,.8); }
.fstate .photo-scrim { position: absolute; inset: 0; background: rgba(46,38,32,.46); }
.fstate .mid { position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center; padding: 0 110px;
color: #fff; gap: 34px; }
.fstate .mid .st { font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 110px; line-height: 1.14; text-shadow: 0 2px 34px rgba(0,0,0,.45); }
.fpoint .chip-n { display: inline-flex; align-items: center; gap: 18px; background: var(--paper);
border-radius: 999px; padding: 16px 40px 16px 20px; box-shadow: 0 10px 34px rgba(0,0,0,.25); }
.fpoint .chip-n .n { font-family: var(--font-display); font-weight: 500; font-size: 56px;
color: #fff; background: var(--fir); width: 76px; height: 76px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; line-height: 1;
font-feature-settings: 'lnum' 1; font-variant-numeric: lining-nums; }
.slide-end { justify-content: center; align-items: center; text-align: center;
background: var(--fir); color: #D9E0D6; }
.slide-end h2 { color: #FAF7F1; }
/* ---- Coaching-/Freebie-Palette (Angebote FÜR Fotografinnen) ---- */
body.coaching {
--paper:#FAF8F5; --card:#FFFEFC; --inset:#E9E0D3; --sand:#D4C4B0;
--clay:#C4805A; --mocha:#C4805A; --espresso:#2E2A27; --espresso-deep:#1F1C19;
--fir:#C4805A; --fir-deep:#A96A48; --fir-soft:#F1E4DA;
--ink:#2E2A27; --ink-soft:#6B625A; --ink-mute:#A99A88;
--line:#E4D9C9; --line-strong:#D4C4B0; --blush:#E9E0D3;
--fw-body: 400;
}
/* ---- Print / PDF (A4) ---- */
.page { background: var(--paper); }
.pnum { position: absolute; bottom: 12mm; left: 0; right: 0; text-align: center;
font-size: 8.5pt; letter-spacing: 0.2em; color: var(--ink-mute); }
@media print {
@page { size: A4; margin: 0; }
body { font-weight: 400; }
p, li { font-size: 11.5pt; }
.page { width: 210mm; height: 296mm; padding: 28mm 26mm; page-break-after: always;
position: relative; overflow: hidden; }
}