/* ========================================================================== Unique Germany - Gestaltungsraster fuer Tour-, Destination- und Service-Seiten Vorbild: Struktur von cti-dmc.de, Farben und Schriften unveraendert von UG. Alle Regeln haengen an .ug-tpl auf . Damit kann keine Regel eine Seite beeinflussen, die nicht auf einem der neuen Templates laeuft - wichtig, weil das Stylesheet global geladen wird. Kontrast: Weiss auf #f1881f misst 2,54:1 und faellt durch WCAG AA. Jede orange Flaeche traegt deshalb #242d2d (8,9:1). Fuer Orange auf Weiss wird #cb6809 benutzt (3,80:1), nie #f1881f. ========================================================================== */ .ug-tpl { --ug-ink:#242d2d; --ug-ink-2:#3a4646; --ug-ink-3:#5f5f5f; --ug-orange:#f1881f; --ug-orange-dp:#cb6809; --ug-paper:#fff; --ug-paper-2:#f6f4f1; --ug-rule:#ded8d1; --ug-shadow:0 2px 22px rgba(36,45,45,.07), 0 1px 3px rgba(36,45,45,.05); --ug-wrap:1266px; /* ergibt dieselbe linke Kante wie die Startseite */ --ug-display:var(--global-heading-font-family, K2D, sans-serif); --ug-body:var(--global-body-font-family, 'Open Sans', sans-serif); } /* Kadence legt auf Einzelseiten Abstaende um den Inhalt. Die neuen Templates arbeiten mit vollbreiten Baendern und brauchen sie nicht. WICHTIG: nicht .site-container global anfassen - die Klasse traegt auch der Header, und ohne ihre Breite rutscht das Logo aus dem Raster. */ .ug-tpl .content-area{margin:0} .ug-tpl #main.ug-page > .site-container{max-width:none;padding:0} .ug-tpl .entry-content-wrap{padding:0} .ug-tpl .entry.single-entry{box-shadow:none} .ug-tpl .ug-page{font:300 16px/1.65 var(--ug-body);color:var(--ug-ink)} .ug-tpl .ug-page *,.ug-tpl .ug-page *::before,.ug-tpl .ug-page *::after{box-sizing:border-box} .ug-wrap{max-width:var(--ug-wrap);margin:0 auto;padding:0 24px} .ug-band{padding:78px 0} .ug-band--warm{background:var(--ug-paper-2)} .ug-band--ink{background:var(--ug-ink);color:#fff} /* Linksbuendig wie alles andere - NICHT zentrieren, sonst springt der Text gegenueber Karten, Kacheln und Kickern ein. */ .ug-col{max-width:74ch} /* ---------- Typografie im Textbereich ---------- */ .ug-prose p{margin:0 0 18px;color:var(--ug-ink-2)} .ug-prose h2{font:300 38px/1.16 var(--ug-display);margin:44px 0 0;letter-spacing:-.005em; text-transform:none;text-wrap:balance;color:var(--ug-ink)} .ug-prose h2::after{content:"";display:block;width:56px;height:3px; background:var(--ug-orange);margin:20px 0 26px} .ug-prose h3{font:500 21px/1.3 var(--ug-display);margin:36px 0 10px;text-transform:none} .ug-prose > :first-child{margin-top:0} .ug-prose ul,.ug-prose ol{margin:0 0 20px;padding-left:0;list-style:none} .ug-prose ul li{position:relative;padding-left:26px;margin-bottom:11px;color:var(--ug-ink-2)} .ug-prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px; background:var(--ug-orange)} .ug-prose ol{counter-reset:ugo} .ug-prose ol li{position:relative;padding-left:32px;margin-bottom:11px;counter-increment:ugo; color:var(--ug-ink-2)} .ug-prose ol li::before{content:counter(ugo);position:absolute;left:0;top:0; font:600 13px/1.55 var(--ug-body);color:var(--ug-orange-dp)} .ug-prose a{color:var(--ug-orange-dp);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} .ug-prose strong{font-weight:600;color:var(--ug-ink)} .ug-eyebrow{font:600 11.5px/1 var(--ug-body);letter-spacing:.16em;text-transform:uppercase; color:var(--ug-orange-dp);margin:0 0 14px} .ug-band--ink .ug-eyebrow{color:var(--ug-orange)} .ug-sec{font:300 38px/1.16 var(--ug-display);margin:0;letter-spacing:-.005em; text-transform:none;text-wrap:balance} .ug-rule{width:56px;height:3px;background:var(--ug-orange);margin:20px 0 26px} .ug-band--ink p{color:#c9cfce} .ug-btn{display:inline-block;font:600 12.5px/1 var(--ug-body);letter-spacing:.12em; text-transform:uppercase;padding:16px 30px;text-decoration:none; border:1.5px solid transparent;border-radius:0} .ug-btn--fill{background:var(--ug-orange);color:var(--ug-ink)} .ug-btn--fill:hover,.ug-btn--fill:focus-visible{background:var(--ug-orange-dp);color:#fff} .ug-btn--ghost{border-color:rgba(255,255,255,.5);color:#fff} .ug-btn--ghost:hover,.ug-btn--ghost:focus-visible{border-color:var(--ug-orange); background:var(--ug-orange);color:var(--ug-ink)} .ug-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px} /* ---------- Hero ---------- */ /* Der Header bleibt wie auf der Startseite und liegt ueber dem Hero. Der obere Innenabstand haelt Kicker und H1 frei davon. */ .ug-hero{position:relative;min-height:560px;display:flex;align-items:flex-end; padding:170px 0 62px;color:#fff;overflow:hidden;background:#242d2d; background-size:cover;background-position:center} .ug-hero::before{content:"";position:absolute;inset:0; background:linear-gradient(178deg,rgba(36,45,45,.42) 0%,rgba(36,45,45,.62) 45%, rgba(26,34,34,.88) 100%)} /* width:100% ist noetig: der Hero ist ein Flex-Container, sein Kind schrumpft sonst auf die Textbreite und wird von margin:0 auto in die Mitte gezogen - dann steht der Hero-Text nicht mehr auf der linken Kante wie alles andere. */ .ug-hero > .ug-wrap{position:relative;z-index:2;width:100%} .ug-hero h1{font:300 60px/1.06 var(--ug-display);margin:22px 0 0;max-width:19ch; letter-spacing:-.015em;text-transform:none;text-wrap:balance;color:#fff} .ug-hero .ug-sub{margin:18px 0 0;max-width:52ch;font-size:18px;font-weight:300;color:#dfe3e2} /* background-color, NICHT die Kurzschreibweise background: - die setzt sonst background-size:cover aus .ug-hero zurueck, und das Foto wird in Originalgroesse oben links angesetzt statt formatfuellend. */ .ug-hero--flat{min-height:0;padding:170px 0 66px;background-color:var(--ug-ink); background-position:center 32%} /* Leistungsseiten: das Foto liegt weit hinten. Rund 88 % Deckung, damit es als Textur wirkt und nicht als Reisebild - der Typ soll sich weiter klar von Tour- und Destination-Seiten unterscheiden. Der Kontrast der weissen Schrift bleibt damit auch ueber hellen Bildstellen sicher. */ .ug-hero--flat::before{background: radial-gradient(90% 130% at 84% 6%, rgba(241,136,31,.24), transparent 60%), linear-gradient(176deg, rgba(36,45,45,.80) 0%, rgba(26,34,34,.92) 100%)} .ug-kicker{display:inline-block;background:var(--ug-orange);color:var(--ug-ink); font:600 11.5px/1 var(--ug-body);letter-spacing:.16em;text-transform:uppercase; padding:9px 17px;border-radius:999px} @media(max-width:760px){.ug-hero h1{font-size:36px}.ug-hero{min-height:420px;padding:120px 0 46px}} /* ---------- Faktenleiste (nur Tour) ---------- */ .ug-facts{background:var(--ug-ink);color:#fff} .ug-facts .ug-in{max-width:var(--ug-wrap);margin:0 auto;padding:0 24px;display:grid; grid-template-columns:repeat(var(--ug-cols,4),minmax(0,1fr))} /* Die Trennlinien brauchen auf BEIDEN Seiten Luft. Vorher hatte jede Spalte rechts 26 px und links null - der Text von Spalte 2 bis 4 klebte damit direkt an der Linie davor. Spalte 1 behaelt links 0, damit sie auf der gemeinsamen Kante der Seite steht. */ .ug-facts > .ug-in > div{padding:32px 34px;border-right:1px solid rgba(255,255,255,.14)} .ug-facts > .ug-in > div:first-child{padding-left:0} .ug-facts > .ug-in > div:last-child{border-right:0;padding-right:0} .ug-facts dt{font:600 10.5px/1 var(--ug-body);letter-spacing:.16em;text-transform:uppercase; color:var(--ug-orange);margin:0 0 9px} .ug-facts dd{margin:0;font:300 19px/1.28 var(--ug-display);font-variant-numeric:tabular-nums} @media(max-width:820px){.ug-facts .ug-in{grid-template-columns:repeat(2,minmax(0,1fr))} .ug-facts > .ug-in > div:nth-child(2){border-right:0;padding-right:0} .ug-facts > .ug-in > div:nth-child(odd){padding-left:0} .ug-facts > .ug-in > div:nth-child(-n+2){padding-bottom:22px} .ug-facts > .ug-in > div:nth-child(n+3){padding-top:22px; border-top:1px solid rgba(255,255,255,.14)}} /* ---------- Zeitachse (nur Tour) ---------- */ .ug-tl{list-style:none;margin:0;padding:0;position:relative;max-width:74ch} .ug-tl::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px; background:var(--ug-rule)} .ug-tl li{position:relative;padding:0 0 34px 42px} .ug-tl li:last-child{padding-bottom:0} .ug-tl li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px; border-radius:50%;background:var(--ug-orange);border:3px solid var(--ug-paper-2); box-shadow:0 0 0 1px var(--ug-orange)} .ug-tl .ug-step{font:600 10.5px/1 var(--ug-body);letter-spacing:.16em;text-transform:uppercase; color:var(--ug-orange-dp);display:block;margin-bottom:7px} .ug-tl strong{display:block;font:500 18px/1.35 var(--ug-display);margin-bottom:5px} .ug-tl p{margin:0;font-size:15px;color:var(--ug-ink-2)} /* ---------- Inbegriffen / nicht inbegriffen (nur Tour) ---------- */ .ug-incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .ug-incl > div{background:#fff;border-radius:14px;padding:30px;box-shadow:var(--ug-shadow)} .ug-incl h3{font:600 11px/1 var(--ug-body);letter-spacing:.14em;text-transform:uppercase; margin:0 0 18px;color:var(--ug-ink)} .ug-incl ul{margin:0;padding:0;list-style:none;display:grid;gap:11px} .ug-incl li{position:relative;padding-left:28px;font-size:14.5px;color:var(--ug-ink-2)} .ug-incl li::before{position:absolute;left:0;top:0;font-weight:600} .ug-incl .ug-yes li::before{content:"\2713";color:var(--ug-orange-dp)} .ug-incl .ug-no li::before{content:"\2013";color:#9aa3a2} @media(max-width:760px){.ug-incl{grid-template-columns:1fr}} /* ---------- Karten (nur Destination) ---------- */ .ug-cards{display:grid;grid-template-columns:repeat(var(--ug-cols,4),minmax(0,1fr));gap:22px} .ug-card{background:#fff;border-radius:14px;padding:28px;box-shadow:var(--ug-shadow)} .ug-card .ug-lbl{font:600 11px/1.35 var(--ug-body);letter-spacing:.14em;text-transform:uppercase; color:var(--ug-orange-dp);margin:0 0 12px} .ug-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ug-ink-2)} @media(max-width:1000px){.ug-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.ug-cards{grid-template-columns:1fr}} /* ---------- Bild/Text im Wechsel (nur Destination) ---------- */ .ug-hl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px;align-items:center; margin-bottom:70px} .ug-hl:last-child{margin-bottom:0} .ug-hl:nth-child(even) .ug-fig{order:2} /* Bildloser Block: eine Spalte, Lesebreite beibehalten. */ .ug-hl--nurtext{grid-template-columns:1fr} .ug-hl--nurtext > div{max-width:74ch} .ug-fig{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--ug-ink)} .ug-fig img{width:100%;height:100%;object-fit:cover;display:block} .ug-hl h3{font:300 30px/1.2 var(--ug-display);margin:0;text-transform:none;text-wrap:balance} .ug-hl p{color:var(--ug-ink-2)} @media(max-width:860px){.ug-hl{grid-template-columns:1fr;gap:26px} .ug-hl:nth-child(even) .ug-fig{order:0}} /* ---------- Kachelraster (Tour + Destination) ---------- */ .ug-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .ug-tile{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--ug-shadow); display:flex;flex-direction:column} .ug-tile .ug-im{aspect-ratio:16/10;background:var(--ug-ink);overflow:hidden} .ug-tile .ug-im img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s ease} .ug-tile:hover .ug-im img{transform:scale(1.04)} .ug-tile .ug-bd{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column} .ug-tile .ug-cat{font:600 10.5px/1 var(--ug-body);letter-spacing:.15em;text-transform:uppercase; color:var(--ug-orange-dp);margin:0 0 10px} .ug-tile h3{font:500 18px/1.32 var(--ug-display);margin:0 0 10px;text-transform:none} .ug-tile h3 a{color:var(--ug-ink);text-decoration:none} .ug-tile p{margin:0 0 16px;font-size:14px;flex:1;color:var(--ug-ink-2)} .ug-tile .ug-more{font:600 11.5px/1 var(--ug-body);letter-spacing:.13em;text-transform:uppercase; color:var(--ug-ink);text-decoration:none;border-bottom:2px solid var(--ug-orange); padding-bottom:5px;align-self:flex-start} @media(max-width:900px){.ug-tiles{grid-template-columns:1fr}} /* ---------- Nummerierte Schritte (nur Service) ---------- */ .ug-steps{display:grid;grid-template-columns:repeat(var(--ug-cols,4),minmax(0,1fr)); position:relative} .ug-steps::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:2px; background:var(--ug-rule)} .ug-steps > div{position:relative;padding:0 20px 0 0} .ug-steps .ug-n{width:56px;height:56px;border-radius:50%;background:var(--ug-orange); color:var(--ug-ink);display:grid;place-items:center;position:relative;z-index:2; font:500 22px/1 var(--ug-display);font-variant-numeric:tabular-nums; box-shadow:0 0 0 8px var(--ug-paper-2)} .ug-steps h3{font:500 18px/1.3 var(--ug-display);margin:22px 0 8px;text-transform:none} .ug-steps p{margin:0;font-size:14.5px;color:var(--ug-ink-2)} @media(max-width:900px){.ug-steps{grid-template-columns:1fr;gap:30px} .ug-steps::before{display:none}.ug-steps > div{padding:0}} /* ---------- Leistungsliste (nur Service) ---------- */ .ug-spec{border-top:1px solid var(--ug-rule);max-width:78ch;margin:0} .ug-spec > div{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:26px; padding:20px 0;border-bottom:1px solid var(--ug-rule)} .ug-spec dt{font:600 11.5px/1.5 var(--ug-body);letter-spacing:.13em;text-transform:uppercase; color:var(--ug-ink);margin:0} .ug-spec dd{margin:0;font-size:15px;color:var(--ug-ink-2)} @media(max-width:680px){.ug-spec > div{grid-template-columns:1fr;gap:6px}} /* ---------- Linkreihe ---------- */ .ug-linkrow{display:flex;flex-wrap:wrap;gap:10px} .ug-linkrow a{font:600 12px/1 var(--ug-body);letter-spacing:.08em;text-transform:uppercase; color:var(--ug-ink);text-decoration:none;background:#fff;border:1px solid var(--ug-rule); border-radius:999px;padding:12px 20px} .ug-linkrow a:hover,.ug-linkrow a:focus-visible{border-color:var(--ug-orange); color:var(--ug-orange-dp)} /* ---------- FAQ ---------- */ .ug-faq{max-width:78ch;border-top:1px solid var(--ug-rule)} .ug-faq details{border-bottom:1px solid var(--ug-rule)} .ug-faq summary{cursor:pointer;list-style:none;padding:21px 40px 21px 0;position:relative; font:500 18px/1.4 var(--ug-display)} .ug-faq summary::-webkit-details-marker{display:none} .ug-faq summary::after{content:"+";position:absolute;right:8px;top:19px; font:300 26px/1 var(--ug-display);color:var(--ug-orange-dp)} .ug-faq details[open] summary::after{content:"\2013"} .ug-faq p{margin:0 0 21px;font-size:15px;max-width:66ch;color:var(--ug-ink-2)} /* ---------- Textband mit mitlaufender Anfragespalte ---------- Eine Lesespalte ist rund 74 Zeichen breit; rechts davon blieb ein knappes Drittel der Seite leer. Statt die Spalte kuenstlich zu verbreitern (schlecht lesbar) oder sie zu zentrieren (springt gegen die uebrigen Baender) steht dort jetzt die Kontaktkarte und laeuft beim Lesen mit. */ .ug-textband{display:grid; grid-template-columns:minmax(0,1fr) clamp(272px, 27%, 340px); gap:clamp(32px, 4vw, 60px);align-items:start} .ug-rail{position:sticky;top:110px} @media(max-width:900px){.ug-textband{grid-template-columns:1fr;gap:40px} .ug-rail{position:static;max-width:560px}} /* ---------- Kontaktkarte ---------- */ .ug-contact{max-width:720px;margin:0 auto;background:#fff;border-radius:16px;padding:38px; box-shadow:var(--ug-shadow)} .ug-contact .ug-top{display:flex;gap:20px;align-items:center;margin-bottom:24px} .ug-badge{width:74px;height:74px;border-radius:50%;background:var(--ug-orange);flex:none; display:grid;place-items:center;font:600 12px/1 var(--ug-body);letter-spacing:.08em; color:var(--ug-ink)} .ug-contact h2{font:500 22px/1.25 var(--ug-display);margin:0 0 5px;text-transform:none} .ug-contact .ug-role{margin:0;font-size:14.5px;color:var(--ug-ink-3)} .ug-contact .ug-say{border-top:1px solid var(--ug-rule);padding-top:22px;margin:0 0 22px; font-size:15px;color:var(--ug-ink-2)} .ug-contact dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 22px; border-top:1px solid var(--ug-rule);padding-top:22px} .ug-contact dt{font:600 11px/1.5 var(--ug-body);letter-spacing:.12em;text-transform:uppercase; color:var(--ug-ink-3);margin:0} .ug-contact dd{margin:0;font-size:14.5px} .ug-contact dd a{color:var(--ug-ink);text-decoration:none;border-bottom:1px solid var(--ug-rule)} .ug-contact dd a:hover{border-bottom-color:var(--ug-orange)} /* Schmale Fassung fuer die Anfragespalte. */ .ug-contact--rail{max-width:none;margin:0;padding:28px} .ug-contact--rail .ug-top{gap:15px;margin-bottom:18px} .ug-contact--rail .ug-badge{width:54px;height:54px;font-size:10px} .ug-contact--rail h2{font-size:19px} .ug-contact--rail .ug-role{font-size:13.5px} .ug-contact--rail .ug-say{font-size:14px;padding-top:18px;margin-bottom:18px} .ug-contact--rail dl{grid-template-columns:1fr;gap:2px 0;padding-top:18px} .ug-contact--rail dd{margin-bottom:12px;font-size:14px} .ug-contact--rail dd:last-child{margin-bottom:0} .ug-contact--rail .ug-btn{display:block;text-align:center;margin-top:22px} @media(max-width:520px){.ug-contact{padding:26px} .ug-contact dl{grid-template-columns:1fr;gap:2px 0} .ug-contact dd{margin-bottom:12px}} /* ---------- Abschluss-Bande ---------- */ .ug-close{text-align:center} .ug-close h2{font:300 40px/1.14 var(--ug-display);margin:0 0 16px;text-transform:none; text-wrap:balance;color:#fff} .ug-close p{max-width:56ch;margin:0 auto 28px} .ug-close .ug-meta{margin:22px 0 0;font-size:13.5px;color:#98a1a0} @media(max-width:760px){.ug-close h2{font-size:30px}.ug-sec{font-size:28px} .ug-prose h2{font-size:28px}.ug-band{padding:56px 0}} /* ---------- Dauerhafter Anfrage-Knopf ---------- */ .ug-sticky{position:fixed;right:24px;bottom:24px;z-index:9990;background:var(--ug-orange); color:var(--ug-ink);font:600 13.5px/1 var(--ug-body);padding:15px 24px;border-radius:999px; box-shadow:0 6px 24px rgba(36,45,45,.24);display:inline-flex;gap:9px;align-items:center; text-decoration:none} .ug-sticky:hover,.ug-sticky:focus-visible{background:var(--ug-orange-dp);color:#fff} .ug-sticky::before{content:"\2709";font-size:14px} @media(max-width:600px){.ug-sticky{right:14px;bottom:14px;padding:13px 18px;font-size:12.5px}} /* Kopfband, Logo und Auszeichnungs-Streifen: bewusst NICHT angefasst. Der Header soll identisch zur Startseite bleiben. */ /* Sichtbarer Tastaturfokus - die Site setzt hide-focus-outline global. */ .ug-tpl .ug-page a:focus-visible,.ug-tpl .ug-page summary:focus-visible{ outline:2px solid var(--ug-orange);outline-offset:3px} @media (prefers-reduced-motion:reduce){ .ug-tpl .ug-page *{animation:none!important;transition:none!important}} /* Hinweisband der Vorschau - erscheint nur mit ?ug_preview=1 */ .ug-preview-flag{position:fixed;left:0;right:0;bottom:0;z-index:9995;background:#242d2d; color:#fff;font:600 12px/1.5 var(--ug-body);letter-spacing:.06em;text-transform:uppercase; text-align:center;padding:9px 16px;border-top:3px solid var(--ug-orange)} .ug-preview-flag + .ug-sticky{bottom:60px}