/* ============================================================
FeWo AlpenBase · Globales Section-Stylesheet
------------------------------------------------------------
Das ".ab-*"-Design-System für alle Unterseiten.
Bisher steckte das nur im Living-Menu-Element — hier
einmalig global, damit es auf JEDER Seite greift.
EINBINDEN (einer der Wege):
· TypoScript: page.includeCSS.alpenbase = EXT:dein_sitepackage/Resources/Public/Css/alpenbase-sections.css
· oder im des Fluid-Page-Templates
· oder direkt in eure bestehende globale CSS-Datei kopieren
Die Schriften werden hier per @import geladen. Für etwas mehr
Tempo könnt ihr sie stattdessen als +
in den verschieben (wie im Living Menu).
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');
#ab-menu-data{display:none}
/* Anker-Offset, damit Sub-Links nicht unter der Sticky-Nav landen */
section[id]{scroll-margin-top:88px}
/* ── SECTION-RAHMEN ── */
.ab-section{
min-height:100vh;
padding:clamp(80px,12vh,140px) max(32px,calc(50% - 360px));
font-family:'General Sans','Josefin Sans',sans-serif;
display:flex;flex-direction:column;justify-content:center;
}
.ab-section + .ab-section{border-top:1px solid rgba(94,76,66,.1)}
.ab-section-light{background:#F5F0E5}
.ab-section-white{background:#FDFAF6}
.ab-section-dark{background:#5e4c42}
/* ── TYPOGRAFIE ── */
.ab-title{font-size:58px;font-weight:300;color:#5e4c42;line-height:1.05;margin-bottom:24px}
.ab-label,.ab-intro,.ab-text,.ab-price-season,.ab-price-value,
.ab-activity-title,.ab-activity-text,.ab-fact-value,
.ab-include-tag,.ab-price-note,.ab-cta,.ab-price-period{
font-size:20px;font-weight:300;line-height:1.8;color:rgba(94,76,66,.75);margin-bottom:20px;
}
.ab-intro{font-size:24px}
.ab-label{
font-size:20px;letter-spacing:.02em;text-transform:uppercase;
color:#748459;display:block;margin-bottom:16px;
}
.ab-fact-label{
display:block;font-size:11px;font-weight:200;letter-spacing:.22em;
text-transform:uppercase;color:#748459;margin-bottom:4px;
}
/* dunkle Sektion */
.ab-section-dark .ab-label{color:rgba(245,240,229,.6)}
.ab-section-dark .ab-title{color:#F5F0E5}
.ab-section-dark .ab-intro,
.ab-section-dark .ab-text{color:rgba(245,240,229,.8)}
/* ── FAKTEN-RASTER ── */
.ab-facts{
display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:0;border:1px solid rgba(116,132,89,.2);margin-bottom:36px;
}
.ab-fact{padding:16px 20px;border-right:1px solid rgba(116,132,89,.2);border-bottom:1px solid rgba(116,132,89,.2)}
.ab-fact:nth-child(2n){border-right:none}
.ab-fact-value{color:#5e4c42;margin-bottom:0}
.ab-section-dark .ab-fact-label{color:rgba(245,240,229,.5)}
.ab-section-dark .ab-fact-value{color:#F5F0E5}
.ab-section-dark .ab-fact{border-color:rgba(245,240,229,.12)}
/* ── PREISE ── */
.ab-prices{margin-bottom:36px}
.ab-price-row{
display:flex;justify-content:space-between;align-items:center;
padding:14px 0;border-bottom:1px solid rgba(116,132,89,.15);
}
.ab-price-period{color:rgba(94,76,66,.45);font-size:20px;margin-bottom:0}
.ab-price-value{color:#748459;margin-bottom:0}
.ab-price-note{color:rgba(94,76,66,.5);margin-top:12px}
.ab-price-season{color:#5e4c42;margin-bottom:0}
/* ── LEISTUNGS-TAGS ── */
.ab-includes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.ab-include-tag{color:#5e4c42;border:1px solid rgba(116,132,89,.35);padding:6px 14px;margin-bottom:0}
/* ── AKTIVITÄTEN-KACHELN ── */
.ab-activities{
display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:1px;background:rgba(116,132,89,.15);margin-bottom:36px;
}
.ab-activity{background:#FDFAF6;padding:24px}
.ab-activity-cat{
display:block;font-size:11px;font-weight:200;letter-spacing:.22em;
text-transform:uppercase;color:#748459;margin-bottom:8px;
}
.ab-activity-title{color:#5e4c42;margin-bottom:8px}
.ab-activity-text{color:rgba(94,76,66,.7);margin-bottom:0}
/* ── CTA-BUTTONS ── */
.ab-cta{
display:inline-flex;align-items:center;padding:14px 28px;
color:#F5F0E5;background:#748459;text-decoration:none;
transition:background .3s;border:none;cursor:pointer;margin-bottom:0;
}
.ab-cta:hover{background:#617049}
.ab-cta-outline{background:transparent;color:#748459;border:1px solid rgba(116,132,89,.5);margin-left:14px}
.ab-cta-outline:hover{background:#748459;color:#F5F0E5}