.atmos-instagram {
--aig-ink: #26211e;
--aig-muted: #6e655f;
--aig-line: #ddd6cf;
--aig-wine: #981e29;
--aig-wine-deep: #6f1520;
--aig-tint: #f6f2ee; --aig-serif: 'AA Crimson', 'Crimson Pro', Georgia, 'Times New Roman', serif;
--aig-sans: 'AA Jost', 'Jost', 'Segoe UI', system-ui, sans-serif;
color: var(--aig-ink);
font-family: var(--aig-serif);
margin: 0 auto;
max-width: 1180px;
} .atmos-instagram *, .atmos-instagram *::before, .atmos-instagram *::after,
.aig-ansicht, .aig-ansicht *, .aig-ansicht *::before, .aig-ansicht *::after { box-sizing: border-box; }
.atmos-instagram [hidden], .aig-ansicht [hidden] { display: none !important; }
.atmos-instagram :focus-visible, .aig-ansicht :focus-visible { outline: 2px solid var(--aig-wine) !important; outline-offset: 2px; } .aig-medien :focus-visible { outline-color: #fff !important; }
.aig-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .aig-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin: 8px 0 18px; }
.aig-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.atmos-instagram .aig-chip {
font-family: var(--aig-sans); font-size: 14px; line-height: 1.2; letter-spacing: 0; text-transform: none;
border: 1px solid var(--aig-line); background: #fff; color: var(--aig-ink);
padding: 8px 16px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; min-height: 44px;
}
.atmos-instagram .aig-chip:hover { border-color: var(--aig-ink); }
.atmos-instagram .aig-chip small { color: var(--aig-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.atmos-instagram .aig-chip[aria-pressed="true"] { background: var(--aig-ink); color: #fff; border-color: var(--aig-ink); }
.atmos-instagram .aig-chip[aria-pressed="true"] small { color: #cfc8c2; }
.atmos-instagram .aig-folgen {
font-family: var(--aig-sans); font-size: 14px; color: var(--aig-ink); text-decoration: none;
display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--aig-ink); padding-bottom: 2px;
}
.aig-folgen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } .aig-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.atmos-instagram .aig-kachel {
position: relative; aspect-ratio: 1; max-width: 100%; width: 100%; border: 0; padding: 0; margin: 0;
background: #e9e4df; cursor: pointer; overflow: hidden; display: block; text-align: left; color: #fff; border-radius: 0;
}
.atmos-instagram .aig-kachel img {
position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform .5s ease;
}
.aig-kachel:hover img, .aig-kachel:focus-visible img { transform: scale(1.035); }
.aig-schatten {
position: absolute; inset: auto 0 0 0; padding: 30px 12px 11px; background: linear-gradient(transparent, rgba(20, 16, 14, .8));
font-family: var(--aig-sans); font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: .25s ease;
}
.aig-kachel:hover .aig-schatten, .aig-kachel:focus-visible .aig-schatten { opacity: 1; transform: none; }
.aig-marke {
position: absolute; top: 9px; left: 9px; font-family: var(--aig-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
background: rgba(255, 255, 255, .93); color: var(--aig-ink); padding: 3px 8px; line-height: 1.4;
}
.aig-marke--dunkel { background: rgba(20, 16, 14, .72); color: #fff; }
.aig-mehrere { position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.aig-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.aig-play svg { width: 54px; height: 54px; padding: 15px; border-radius: 50%; background: rgba(255, 255, 255, .9); fill: var(--aig-ink); }
.aig-mehr { display: grid; justify-items: center; gap: 10px; margin-top: 26px; }
.atmos-instagram .aig-knopf, .aig-ansicht .aig-knopf {
font-family: var(--aig-sans); font-size: 15px; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none;
padding: 12px 22px; border: 1px solid var(--aig-ink); background: transparent; color: var(--aig-ink); cursor: pointer;
display: inline-flex; gap: 8px; align-items: center; min-height: 44px; border-radius: 0;
}
.atmos-instagram .aig-knopf:hover, .aig-ansicht .aig-knopf:hover { background: var(--aig-ink); color: #fff; }
.aig-ansicht .aig-knopf--voll { background: var(--aig-wine); border-color: var(--aig-wine); color: #fff; }
.aig-ansicht .aig-knopf--voll:hover { background: var(--aig-wine-deep); border-color: var(--aig-wine-deep); color: #fff; }
.aig-status, .aig-leer { font-family: var(--aig-sans); font-size: 14px; color: var(--aig-muted); text-align: center; margin: 0; }
.aig-status:not(:empty) { margin-top: 18px; }
.aig-leer { padding: 40px 0; } .aig-ansicht {
--aig-ink: #26211e; --aig-muted: #6e655f; --aig-line: #ddd6cf; --aig-wine: #981e29; --aig-wine-deep: #6f1520;
--aig-serif: 'AA Crimson', 'Crimson Pro', Georgia, serif; --aig-sans: 'AA Jost', 'Jost', 'Segoe UI', system-ui, sans-serif;
border: 0; padding: 0; width: min(1060px, 94vw); max-width: 94vw; max-height: 90vh; background: #fff; color: var(--aig-ink); overflow: hidden;
}
.aig-ansicht::backdrop { background: rgba(24, 20, 18, .74); }
.aig-ansicht__innen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-height: 90vh; }
.aig-medien { position: relative; background: #16120f; aspect-ratio: 1; max-width: 100%; align-self: start; }
.aig-medien img, .aig-medien video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; display: block; background: #16120f; }
.aig-medien .aig-pfeil {
position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0;
background: rgba(255, 255, 255, .88); color: var(--aig-ink); cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 1;
}
.aig-pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.aig-pfeil--l { left: 10px; } .aig-pfeil--r { right: 10px; }
.aig-punkte { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; z-index: 1; } .aig-ansicht .aig-punkte button { width: 24px; height: 44px; padding: 18px 8px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .5); background-clip: content-box; cursor: pointer; min-height: 0; }
.aig-ansicht .aig-punkte button[aria-current="true"] { background-color: #fff; }
.aig-text { overflow: auto; padding: 30px 32px 26px; display: grid; gap: 16px; align-content: start; min-width: 0; font-family: var(--aig-serif); }
.aig-meta { font-family: var(--aig-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--aig-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.aig-meta b { color: var(--aig-wine); font-weight: 500; }
.aig-ansicht .aig-titel { font-family: var(--aig-serif); font-weight: 500; font-size: 28px; line-height: 1.2; margin: 0; text-wrap: balance; color: var(--aig-ink); letter-spacing: 0; text-transform: none; }
.aig-ansicht .aig-absatz { font-size: 18px; line-height: 1.55; margin: 0; color: var(--aig-ink); }
.aig-hinweis { font-family: var(--aig-sans); font-size: 14px; color: var(--aig-muted); margin: 0; }
.aig-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.aig-ansicht .aig-iglink { font-family: var(--aig-sans); font-size: 13px; color: var(--aig-muted); }
.aig-blaettern { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--aig-line); padding-top: 14px; }
.aig-ansicht .aig-blaettern button { font-family: var(--aig-sans); font-size: 13px; letter-spacing: 0; text-transform: none; background: none; border: 0; color: var(--aig-ink); cursor: pointer; padding: 8px 0; min-height: 44px; }
.aig-blaettern button:disabled { color: var(--aig-line); cursor: default; }
.aig-blaettern span { font-family: var(--aig-sans); font-size: 12px; color: var(--aig-muted); font-variant-numeric: tabular-nums; }
.aig-ansicht .aig-zu {
position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; padding: 0; background: rgba(255, 255, 255, .92);
cursor: pointer; display: grid; place-items: center; z-index: 2; color: var(--aig-ink);
}
.aig-zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .aig-frage { --aig-ink: #26211e; --aig-muted: #6e655f; --aig-line: #ddd6cf; --aig-wine: #981e29; --aig-wine-deep: #6f1520;
--aig-sans: 'AA Jost', 'Jost', 'Segoe UI', system-ui, sans-serif; --aig-serif: 'AA Crimson', 'Crimson Pro', Georgia, serif; }
.aig-frage.aig-frage { border-top: 1px solid var(--aig-line); padding-top: 18px; margin-top: 6px; display: grid; gap: 12px; color: var(--aig-ink); }
.aig-frage, .aig-frage * { box-sizing: border-box; }
.aig-frage.aig-frage :focus-visible { outline: 2px solid var(--aig-wine) !important; outline-offset: 2px; }
.aig-frage.aig-frage .aig-frage__titel { font-family: var(--aig-serif); font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; padding: 0; letter-spacing: 0; text-transform: none; color: var(--aig-ink); }
.aig-frage.aig-frage .aig-frage__hinweis { font-family: var(--aig-sans); font-size: 14px; line-height: 1.5; color: var(--aig-muted); margin: 0; }
.aig-frage.aig-frage .aig-frage__meldung { font-family: var(--aig-sans); font-size: 14px; line-height: 1.5; color: var(--aig-wine); margin: 0; border-left: 2px solid var(--aig-wine); padding-left: 10px; }
.aig-frage.aig-frage .aig-frage__meldung:empty { display: none; }
.aig-frage.aig-frage .aig-frage__form { display: grid; gap: 12px; margin: 0; }
.aig-frage.aig-frage .aig-frage__feld { display: grid; gap: 4px; margin: 0; }
.aig-frage.aig-frage .aig-frage__feld label { font-family: var(--aig-sans); font-size: 14px; font-weight: 400; color: var(--aig-ink); letter-spacing: 0; text-transform: none; margin: 0; }
.aig-frage.aig-frage textarea, .aig-frage.aig-frage input[type="email"] { width: 100%; height: auto; font-family: var(--aig-serif); font-size: 17px; font-weight: 400;
line-height: 1.45; letter-spacing: 0; text-transform: none; border: 1px solid var(--aig-line); border-radius: 0; background: #fff; color: var(--aig-ink);
padding: 10px 12px; min-height: 44px; margin: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
.aig-frage.aig-frage textarea { resize: vertical; }
.aig-frage.aig-frage [aria-invalid="true"] { border-color: var(--aig-wine); }
.aig-frage.aig-frage .aig-frage__einw { grid-template-columns: auto 1fr; align-items: start; column-gap: 10px; min-height: 44px; padding-block: 6px; }
.aig-frage.aig-frage .aig-frage__einw input { width: 24px; height: 24px; margin: 0; accent-color: var(--aig-wine); -webkit-appearance: checkbox; appearance: auto; }
.aig-frage.aig-frage .aig-frage__feld.aig-frage__einw label { font-size: 13px; color: var(--aig-muted); line-height: 1.5; padding: 2px 0 8px; cursor: pointer; }
.aig-frage.aig-frage .aig-frage__einw a { color: var(--aig-ink); text-decoration: underline; text-underline-offset: 2px; }
.aig-frage.aig-frage .aig-frage__einw .aig-frage__fehler { grid-column: 1 / -1; }
.aig-frage.aig-frage .aig-frage__fehler { font-family: var(--aig-sans); font-size: 13px; line-height: 1.4; color: var(--aig-wine); margin: 0; }
.aig-frage.aig-frage .aig-knopf { justify-self: start; font-family: var(--aig-sans); font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none;
padding: 12px 22px; border: 1px solid var(--aig-wine); background: var(--aig-wine); color: #fff; cursor: pointer; min-height: 44px; border-radius: 0; box-shadow: none; }
.aig-frage.aig-frage .aig-knopf:hover { background: var(--aig-wine-deep); border-color: var(--aig-wine-deep); }
.aig-frage.aig-frage .aig-knopf[aria-disabled="true"] { opacity: .6; cursor: default; }
.aig-frage.aig-frage .aig-frage__danke { font-family: var(--aig-serif); font-size: 18px; margin: 0; border-left: 2px solid var(--aig-wine); padding-left: 12px; }
.aig-frage.aig-frage .aig-frage__meldung a { color: inherit; }
.aig-journal-figur { margin: 0 0 1.5em; }
.aig-journal-figur img { display: block; width: 100%; height: auto; max-width: 100%; }
.aig-journal-ig a { font-family: 'AA Jost', 'Jost', sans-serif; font-size: 14px; } .aig-frage.aig-frage .aig-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 560px) { .aig-frage.aig-frage .aig-knopf { justify-self: stretch; justify-content: center; } }
@media (max-width: 900px) {
.aig-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.aig-ansicht { width: 100vw; max-width: 100vw; height: 100%; height: 100dvh; max-height: 100dvh; margin: 0; }
.aig-ansicht__innen { grid-template-columns: 1fr; max-height: none; height: 100%; overflow: auto; }
.aig-text { overflow: visible; padding: 22px 18px calc(28px + env(safe-area-inset-bottom, 0px)); }
.aig-ansicht .aig-zu { top: calc(10px + env(safe-area-inset-top, 0px)); }
.aig-schatten { display: none; }
}
@media (max-width: 560px) {
.aig-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.aig-ansicht .aig-titel { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.atmos-instagram *, .aig-ansicht * { transition: none !important; }
}