/* ==========================================================================
Rechtsseiten – studiocarbon.eu (Impressum, Privacy Policy, Cookie Policy, 404)
Ergänzt nur, was style.css (Abschnitt 10 "Seitenkopf/Textseiten") noch nicht
abdeckt: Überschriften-Font in .entry,
, die Cookie-Policy-Struktur
(Complianz-Nachbau: nummerierte Kapitel + Cookie-Tabellen) und die 404-Seite.
========================================================================== */
/* 1. Privacy Policy (WPLegalPages) ---------------------------------------- */
/* Überschriften im Textinhalt: Varela, font-weight 600 wie im Original (dort ebenfalls nur Varela 400 geladen,
der Browser erzeugt den Fettdruck synthetisch – das gehört zum Look). */
.entry h3{font-family:var(--font-display);font-weight:600} /* wie Original: 600 (synthetischer Fettdruck, Varela hat nur 400) */
.entry hr{
clear:both;box-sizing:content-box;height:1px;margin:20px 0;
border-width:1px 0 0;border-style:solid none none;border-color:#0a0a0a;
}
/* Original hat auf #primary/.content-area (mobil) margin-bottom:40px (style.css) *ohne* dass ein
.clr-Clearfix den Trailing-Margin des letzten Absatzes vorher "einfängt" – bei uns tut .entry.clr
das doch (::after mit clear:both bekommt Clearance, das Margin kollabiert nicht mehr durch),
wodurch die Fußzeile mobil 20px zu spät kam. Nur mobil neutralisieren (Desktop stimmt bereits). */
@media (max-width:767px){
/* nur die Kette vom Entry-Root zum letzten sichtbaren Absatz (privacy-policy: .entry>p;
cookie-policy: .entry>.cookie-policy>p) – NICHT alle :last-child irgendwo im Inhalt,
sonst würde z.B. der letzte Absatz jeder "Usage/Sharing data"-Spalte mit betroffen. */
.entry>:last-child,.entry>:last-child>:last-child{margin-bottom:0}
}
/* 2. Cookie Policy (Complianz-Nachbau) ------------------------------------ */
.cookie-policy{max-width:800px}
.cookie-policy a{text-decoration:underline}
/* Original hängt an jeden externen Link (target=_blank) per ::after ein 10×10-Icon (margin 0 3px 0 5px,
also +18px Breite) – ohne das fallen die Cookie-Namen/"Read more …"-Links + Tabellenspalten zu schmal aus. */
.cookie-policy a[target="_blank"]::after{
content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==");
margin:0 3px 0 5px;
}
.cookie-policy h2,.cookie-policy h3{
font-family:var(--font-display);font-size:22px;font-weight:600;
color:var(--c-heading);padding-bottom:10px;margin:15px 0 10px;
}
.cookie-policy h2{line-height:1.4} /* 30.8px – wie im Original gemessen */
.cookie-policy h3{line-height:1.2} /* 26.4px – Unterkapitel (5.1 …) sind niedriger als H2 */
.cookie-policy ul{margin:15px 0 15px 15px}
/* 7.1 "Manage your consent settings": Original zeigt hier das eingebettete Complianz-
Kategorien-Widget (115px hoch); wir verlinken stattdessen auf den Cookie-Banner
(öffnet ihn erneut, sc-cookie-open in cookie.js) – Höhe bleibt erhalten, damit
Kapitel 8ff. an der gleichen y-Position wie im Original stehen. */
.cookie-consent-manage{min-height:110px}
/* "6. Placed cookies": pro Dienst ein (Browser-native Auf-/Zuklappen,
kein JS nötig) – Kopf mit Name/Kategorie/Chevron, Inhalt mit Nutzung/Weitergabe
und einer Cookie-Tabelle (CSS-Grid, wie im Original per Grid-Areas gebaut). */
.cookie-services{margin:0}
.cookie-service{background:rgba(239,239,239,.25)}
.cookie-service+.cookie-service{margin-top:0}
.cookie-service summary{
list-style:none;cursor:pointer;background:rgba(239,239,239,.5);margin:5px 0;padding:5px 10px;
}
.cookie-service summary::-webkit-details-marker,.cookie-service summary::marker{display:none;content:""}
.cookie-service[open]{padding-bottom:1px}
/* Kopfzeile je Dienst: Original baut das per CSS-Grid mit 5 (teils leeren) Spalten
"heading paragraph label checkbox chevron" = 2fr auto 0 auto 25px, gap 15px – dadurch
bekommt h3 exakt "verfügbare Breite minus Kategorietext" (variiert pro Dienst) und der
Chevron sitzt fix in einer 25px-Spalte rechts. Mit einem einfachen 3-Spalten-Flex/Grid
(nur 2 statt 4 Gaps + 18 statt 25px Chevron) wird h3 durchgehend 37px zu breit. */
.cookie-service__head{
display:grid;grid-template-columns:2fr auto 0 auto 25px;
grid-template-areas:"heading paragraph label checkbox chevron";
align-items:center;gap:15px;min-height:24px;
}
.cookie-service__head h3{
grid-area:heading;margin:0;padding:0 5px;
font-family:var(--font-display);font-size:18px;line-height:1.2;font-weight:600;
}
.cookie-service__cat{grid-area:paragraph;margin:0;font-size:14px;color:var(--c-text);text-align:right}
.cookie-service__chevron{grid-area:chevron;width:18px;height:18px;color:var(--c-heading)}
.cookie-service__chevron svg{width:18px;height:18px;fill:currentColor;transition:transform .3s}
.cookie-service[open] .cookie-service__chevron svg{transform:rotate(180deg)}
.cookie-service__body{padding:0 0 10px}
.cookie-service__col{display:inline-block;width:calc(50% - 35px);vertical-align:top;padding:0 15px 15px}
/* h4/p bekommen zusätzlich zum Spalten-Padding (15px) ihr eigenes horizontales Padding (15px) –
wie im Original –, dadurch rückt z.B. der "Read more …"-Link auf 30px statt 15px ein. */
.cookie-service__col h4{margin:5px 0;padding:0 15px;font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--c-heading)}
.cookie-service__col p{margin:0 0 20px;padding:0 15px;font-size:14px}
.cookie-table{display:grid;gap:1px;background:#dadada;border:1px solid #dadada;margin:0 0 10px}
.cookie-table>div{background:#fff;padding:15px}
.cookie-table h4{margin:5px 0;padding:0 15px;font-family:var(--font-display);font-weight:600;color:var(--c-heading);font-size:15px}
.cookie-table h5{margin:0;font-family:var(--font-display);font-weight:600;color:var(--c-heading);font-size:14px}
.cookie-table a,.cookie-table__name,.cookie-table__retention,.cookie-table__function{font-size:14px}
.cookie-table__purpose{grid-column:1/-1}
@media (min-width:600px){
/* auto auto auto (nicht "…1fr"!): keine Spalte ist flexibel, daher verteilt der Browser
freien Platz zu gleichen Teilen auf alle drei auto-Spalten (Grid-"stretch" bei
justify-content:normal) – das ergibt exakt die im Original gemessenen, pro Dienst
unterschiedlichen Spaltenbreiten. Mit "1fr" als dritter Spalte bekäme nur diese den Rest. */
.cookie-table{grid-template-columns:auto auto auto;grid-template-areas:"purpose purpose purpose" "nh rh fh"}
.cookie-table__name-header{grid-area:nh;background:#f7f7f7}
.cookie-table__retention-header{grid-area:rh;background:#f7f7f7}
.cookie-table__function-header{grid-area:fh;background:#f7f7f7}
}
@media (max-width:599px){
.cookie-table{grid-template-columns:100px 1fr}
.cookie-table__purpose{grid-column:span 2}
.cookie-table__name-header,.cookie-table__retention-header,.cookie-table__function-header{background:#f7f7f7}
.cookie-table h5{line-height:1.8} /* Original: 25.2px statt 19.6px – nur mobil, macht die h5-Zeile höher */
.cookie-service__col{width:100%}
}
/* 3. 404-Seite ------------------------------------------------------------ */
.error404-content{margin:0 auto;text-align:center} /* Original: volle Containerbreite (1200px) */
.error404-content .error-title{
font-family:var(--font-display);font-size:46px;font-weight:600;line-height:1.4;
color:var(--c-heading);margin:0 0 25px;
}
.error-text{font-size:18px;font-weight:300;line-height:1.6;color:var(--c-text);margin:0 0 35px}
.searchform{max-width:390px;margin:0 auto}
.searchform .field{
display:block;width:100%;height:40px;padding:6px 12px;
font-family:var(--font-body);font-size:14px;line-height:1.8;color:#333;
background:#fff;border:1px solid #ddd;border-radius:3px;
}
.error-btn{
display:inline-block;margin-top:60px;padding:14px 26px;
background:rgb(83,16,136);border:1px solid #fff;color:#fff;
font-size:13px;font-weight:600;line-height:13px;letter-spacing:1.3px;text-transform:uppercase;
text-align:center;transition:.3s;
}
.error-btn:hover{color:#fff}
@media only screen and (max-width:480px){
.searchform{width:100%}
.error-btn{margin-top:40px}
}