/*==========================================================================
    Fliesen Aschauer
    Design System

    Version: 1.3
    Bereinigt: August 2026

    Philosophie

    Ruhig.
    Zeitlos.
    Material im Mittelpunkt.
==========================================================================*/


/*==========================================================================
    01 Reset
==========================================================================*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}


/*==========================================================================
    02 Design Tokens
==========================================================================*/

:root {

    /*----------------------------------------------------------------------
        Farben
    ----------------------------------------------------------------------*/

    --color-background: #f8f6f3;
    --color-surface: #ffffff;

    --color-heading: #222222;
    --color-text: #3f3f3f;
    --color-muted: #666666;

    --color-accent: #8b6f4d;
    --color-accent-hover: #80633f;

    --color-border: #e8e3dc;

    --color-white: #ffffff;
    --color-black: #000000;


    /*----------------------------------------------------------------------
        Typografie
    ----------------------------------------------------------------------*/

    --font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /*----------------------------------------------------------------------
        Schriftgrößen
    ----------------------------------------------------------------------*/

    --font-xs: 1rem;
    --font-sm: 1.125rem;
    --font-md: 1.25rem;
    --font-lg: 2rem;
    --font-xl: 3.5rem;

    --font-h1: var(--font-xl);
    --font-h2: 2.5rem;
    --font-h3: 1.9rem;
    --font-h4: 1.6rem;

    --font-body: var(--font-sm);


    /*----------------------------------------------------------------------
        Zeilenhöhen
    ----------------------------------------------------------------------*/

    --line-height-body: 1.8;
    --line-height-heading: 1.35;


    /*----------------------------------------------------------------------
        Abstände
    ----------------------------------------------------------------------*/

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 2rem;
    --space-4: 3rem;
    --space-5: 5rem;
    --space-6: 7rem;
    --space-7: 9rem;


    /*----------------------------------------------------------------------
        Layout
    ----------------------------------------------------------------------*/

    --container: 1200px;
    --content: 760px;
    --content-wide: 980px;

    --header-height: 76px;


    /*----------------------------------------------------------------------
        Rahmen
    ----------------------------------------------------------------------*/

    --radius-sm: 4px;
    --radius-md: 8px;


    /*----------------------------------------------------------------------
        Schatten
    ----------------------------------------------------------------------*/

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, .06);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .10);


    /*----------------------------------------------------------------------
        Übergänge
    ----------------------------------------------------------------------*/

    --transition: .25s ease;
}


/*==========================================================================
    03 Base
==========================================================================*/

html {
    font-size: 100%;
}

body {
    min-height: 100vh;

    background: var(--color-background);
    color: var(--color-text);

    font-family: var(--font-family);
    font-size: var(--font-body);

    line-height: var(--line-height-body);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/*---------------------------------------------------------------------------
    Links
---------------------------------------------------------------------------*/

a {
    color: inherit;
    text-decoration: none;

    transition: color var(--transition);
}


/*---------------------------------------------------------------------------
    Container
---------------------------------------------------------------------------*/

.aschauer-container {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
}

.aschauer-content {
    max-width: var(--content);
}


/*---------------------------------------------------------------------------
    Überschriften
---------------------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading);

    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);

    letter-spacing: -.02em;
}

h1 {
    font-size: var(--font-h1);
}

h2 {
    font-size: var(--font-h2);
}

h3 {
    font-size: var(--font-h3);
}

h4 {
    font-size: var(--font-h4);
}

h5,
h6 {
    font-size: var(--font-sm);
}


/*---------------------------------------------------------------------------
    Fließtext
---------------------------------------------------------------------------*/

p {
    margin-bottom: var(--space-2);

    color: var(--color-text);

    font-size: var(--font-body);
    line-height: var(--line-height-body);
}

p:last-child {
    margin-bottom: 0;
}


/*---------------------------------------------------------------------------
    Listen
---------------------------------------------------------------------------*/

ul,
ol {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}


/*==========================================================================
    04 Accessibility
==========================================================================*/

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}


/*---------------------------------------------------------------------------
    Tastaturfokus
---------------------------------------------------------------------------*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}


/*==========================================================================
    05 Typography
==========================================================================*/

strong {
    font-weight: var(--font-weight-bold);
}

em {
    font-style: italic;
}

small {
    font-size: var(--font-xs);
    color: var(--color-muted);
}


/*---------------------------------------------------------------------------
    Hervorgehobener Text
---------------------------------------------------------------------------*/

.aschauer-highlight {
    color: var(--color-heading);

    font-size: var(--font-md);
    font-weight: var(--font-weight-semibold);
}


/*---------------------------------------------------------------------------
    Introtext
---------------------------------------------------------------------------*/

.aschauer-intro {
    margin-bottom: var(--space-3);

    color: var(--color-heading);

    font-size: var(--font-md);
    font-weight: var(--font-weight-semibold);
}


/*---------------------------------------------------------------------------
    Zitate
---------------------------------------------------------------------------*/

blockquote {
    margin: var(--space-4) 0;
    padding-left: var(--space-3);

    border-left: 3px solid var(--color-accent);

    color: var(--color-muted);

    font-style: italic;
}


/*---------------------------------------------------------------------------
    Listen im Fließtext
---------------------------------------------------------------------------*/

.aschauer-content ul,
.aschauer-content ol {
    margin: var(--space-2) 0;
    padding-left: 1.5rem;
}

.aschauer-content li {
    margin-bottom: .5rem;
    list-style: disc;
}


/*---------------------------------------------------------------------------
    Links im Fließtext
---------------------------------------------------------------------------*/

.aschauer-content a {
    color: var(--color-accent);

    text-decoration: underline;
    text-underline-offset: .2em;
}

.aschauer-content a:hover {
    color: var(--color-accent-hover);
}


/*==========================================================================
    06 Layout
==========================================================================*/

.aschauer-section {
    padding-bottom: var(--space-6);
}


/*---------------------------------------------------------------------------
    Zweispaltiges Layout
---------------------------------------------------------------------------*/

.aschauer-grid-2 {
    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: var(--space-5);

    align-items: center;
}

.aschauer-grid-2--reverse {
    grid-template-columns: 1.2fr 1fr;
}


/*---------------------------------------------------------------------------
    Content Block
---------------------------------------------------------------------------*/

.aschauer-content-block {
    max-width: 620px;
    margin-inline: auto;
}

.aschauer-content-block h2 {
    margin-bottom: var(--space-2);
}

.aschauer-content-block .aschauer-intro {
    margin-bottom: var(--space-3);
}


/*---------------------------------------------------------------------------
    Content Block mit Linien
---------------------------------------------------------------------------*/

.aschauer-content-block--lined {
    margin-inline: auto;

    padding-block: var(--space-4);

    border-top: 3px solid var(--color-border);
    border-bottom: 3px solid var(--color-border);
}


/*==========================================================================
    Breiter Content Block mit Linien
==========================================================================*/

.aschauer-content-block--lined-wide {
    max-width: 880px;
    margin-inline: auto;

    padding-block: var(--space-4);

    border-top: 3px solid var(--color-border);
    border-bottom: 3px solid var(--color-border);
}


/*---------------------------------------------------------------------------
    Inhalt innerhalb der breiteren Linien
---------------------------------------------------------------------------*/

.aschauer-content-block--lined-wide-inner {
    max-width: 620px;
    margin-inline: auto;
}


/*---------------------------------------------------------------------------
    Überschrift
---------------------------------------------------------------------------*/

.aschauer-content-block--lined-wide-inner h2 {
    margin-bottom: var(--space-2);
}


/*---------------------------------------------------------------------------
    Text
---------------------------------------------------------------------------*/

.aschauer-content-block--lined-wide-inner p {
    margin-bottom: var(--space-3);
}


/*---------------------------------------------------------------------------
    Button
---------------------------------------------------------------------------*/

.aschauer-content-block--lined-wide-inner .aschauer-button {
    display: inline-block;
}


/*==========================================================================
    07 Header
==========================================================================*/

/*
    Der Header muss im HTML diese Klasse besitzen:

    <header class="aschauer-header">

    Der Header ist fixed und wird ausschließlich über
    .is-hidden vom main.js ein- und ausgeblendet.
*/

.aschauer-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(248, 246, 243, .88);

    border-bottom: 1px solid rgba(232, 227, 220, .75);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transform: translateY(0);

    transition:
        transform .35s ease,
        background .25s ease;
        
    will-change: transform;
}


/*---------------------------------------------------------------------------
    Header sichtbar
---------------------------------------------------------------------------*/

.aschauer-header:not(.is-hidden) {
    transform: translateY(0);
}


/*---------------------------------------------------------------------------
    Header versteckt
---------------------------------------------------------------------------*/

.aschauer-header.is-hidden {
    transform: translateY(-100%);
}


/*---------------------------------------------------------------------------
    Header am Seitenanfang
---------------------------------------------------------------------------*/

.aschauer-header.is-top {
    background: rgba(248, 246, 243, .94);
}


/*---------------------------------------------------------------------------
    Header Container
---------------------------------------------------------------------------*/

.aschauer-header > .aschauer-container {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: var(--header-height);
}


/*---------------------------------------------------------------------------
    Logo
---------------------------------------------------------------------------*/

.aschauer-logo {
    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    position: relative;
    z-index: 1002;
}

.aschauer-logo-image {
    display: block;

    width: 220px;
    height: auto;
}


/*==========================================================================
    08 Navigation
==========================================================================*/

.aschauer-nav {
    display: flex;

    align-items: center;

    margin-left: auto;

    position: relative;
    z-index: 1001;
}


/*---------------------------------------------------------------------------
    Desktop Navigation Liste
---------------------------------------------------------------------------*/

.aschauer-nav-list {
    display: flex;

    align-items: center;

    gap: var(--space-3);
}


/*---------------------------------------------------------------------------
    Desktop Navigation Links
---------------------------------------------------------------------------*/

.aschauer-nav-list a {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: var(--header-height);

    color: var(--color-heading);

    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);

    white-space: nowrap;

    transition:
        color var(--transition),
        background var(--transition);
}


/*---------------------------------------------------------------------------
    Hover / aktive Seite
---------------------------------------------------------------------------*/

.aschauer-nav-list a:hover,
.aschauer-nav-list a.is-active {
    color: var(--color-accent);
}


/*---------------------------------------------------------------------------
    Unterlinie Desktop
---------------------------------------------------------------------------*/

.aschauer-nav-list a:not(.aschauer-nav-cta)::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 18px;

    height: 1px;

    background: var(--color-accent);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform .25s ease;
}

.aschauer-nav-list a:not(.aschauer-nav-cta):hover::after,
.aschauer-nav-list a:not(.aschauer-nav-cta).is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}


/*==========================================================================
    08.1 Navigation CTA
==========================================================================*/

.aschauer-nav-list a.aschauer-nav-cta {
    min-height: auto;

    padding: .65rem 1.25rem;

    background: var(--color-accent);
    color: var(--color-white);

    border: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);

    font-weight: var(--font-weight-semibold);

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.aschauer-nav-list a.aschauer-nav-cta:hover,
.aschauer-nav-list a.aschauer-nav-cta.is-active {
    background: var(--color-accent-hover);

    border-color: var(--color-accent-hover);

    color: var(--color-white);
}

.aschauer-nav-list a.aschauer-nav-cta::after {
    display: none !important;
}


/*==========================================================================
    08.2 Mobile Navigation Button
==========================================================================*/

.aschauer-nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 6px;

    padding: 0;

    color: var(--color-heading);

    position: relative;
    z-index: 1003;
}

.aschauer-nav-toggle span:not(.visually-hidden) {
    display: block;

    width: 24px;
    height: 2px;

    background: currentColor;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/*==========================================================================
    08.3 Mobile Navigation
==========================================================================*/

@media (max-width: 900px) {

    /*----------------------------------------------------------------------
        Hamburger anzeigen
    ----------------------------------------------------------------------*/

    .aschauer-nav-toggle {
        display: flex;
    }


    /*----------------------------------------------------------------------
        Navigation Wrapper
    ----------------------------------------------------------------------*/

    .aschauer-nav {
        margin-left: auto;
    }


    /*----------------------------------------------------------------------
        Mobile Menü
    ----------------------------------------------------------------------*/

    .aschauer-nav-list {
        position: fixed;

        top: var(--header-height);
        left: 0;
        right: 0;

        width: 100%;

        display: flex;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding:
            var(--space-2)
            1rem
            var(--space-3);

        background: rgba(248, 246, 243, .97);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        border-bottom: 1px solid var(--color-border);

        box-shadow: var(--shadow-md);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-15px);

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;
    }


    /*----------------------------------------------------------------------
        Geöffnetes Menü

        WICHTIG:
        Die Klasse .is-open sitzt laut main.js auf .aschauer-nav.
    ----------------------------------------------------------------------*/

    .aschauer-nav.is-open .aschauer-nav-list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);
    }


    /*----------------------------------------------------------------------
        Menüeinträge
    ----------------------------------------------------------------------*/

    .aschauer-nav-list li {
        width: 100%;
    }


    /*----------------------------------------------------------------------
        Mobile Links
    ----------------------------------------------------------------------*/

    .aschauer-nav-list a {
        display: flex;

        align-items: center;

        width: 100%;
        min-height: 54px;

        padding: .75rem 0;

        border-bottom: 1px solid var(--color-border);

        font-size: var(--font-sm);
    }

    .aschauer-nav-list li:last-child a {
        border-bottom: 0;
    }


    /*----------------------------------------------------------------------
        Desktop-Unterlinie deaktivieren
    ----------------------------------------------------------------------*/

    .aschauer-nav-list a::after {
        display: none !important;
    }


    /*----------------------------------------------------------------------
        CTA Mobile
    ----------------------------------------------------------------------*/

    .aschauer-nav-list a.aschauer-nav-cta {
        justify-content: center;

        min-height: 50px;

        margin-top: var(--space-2);

        padding: .65rem 1.25rem;

        border: 2px solid var(--color-accent);
        border-radius: var(--radius-sm);
    }


    /*----------------------------------------------------------------------
        Hamburger → X
    ----------------------------------------------------------------------*/

    .aschauer-nav-toggle.is-open span:nth-child(1) {
        transform:
            translateY(8px)
            rotate(45deg);
    }

    .aschauer-nav-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .aschauer-nav-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-8px)
            rotate(-45deg);
    }

}


/*==========================================================================
    09 Hero
==========================================================================*/

.aschauer-hero {
    margin-bottom: 0;
}

.aschauer-hero-image {
    overflow: hidden;
}

.aschauer-hero-photo {
    display: block;

    width: 100%;
    height: 65vh;

    object-fit: cover;
    object-position: center;
}

.aschauer-hero-content {
    max-width: var(--content-wide);

    margin-inline: auto;

    padding-top: var(--space-4);
    padding-bottom: var(--space-5);

    text-align: center;
}

.aschauer-hero-content h1 {
    max-width: 1050px;

    margin-inline: auto;
    margin-bottom: var(--space-3);
}

.aschauer-hero-content p {
    max-width: 680px;

    margin: 0 auto var(--space-3);

    color: var(--color-text);

    font-size: var(--font-md);
    line-height: var(--line-height-body);
}


/*==========================================================================
    10 Themen
==========================================================================*/

/*--------------------------------------------------------------------------

    Themenbereich

--------------------------------------------------------------------------*/

.aschauer-themen-section {
    padding-bottom: var(--space-6);
}


/*--------------------------------------------------------------------------

    Themen-Header

--------------------------------------------------------------------------*/

.aschauer-themen-header {
    max-width: var(--content);
    margin-bottom: var(--space-4);
}

.aschauer-themen-header h2 {
    margin-bottom: var(--space-2);
}

.aschauer-themen-header p {
    margin-bottom: var(--space-2);
}


/*==========================================================================
    Themen Grid
==========================================================================*/

.aschauer-themen-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.aschauer-themen-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/*==========================================================================
    Themen Karte
==========================================================================*/

.aschauer-themen-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    padding: var(--space-2);

    background: var(--color-surface);
}


/*==========================================================================
    Kartenüberschrift
==========================================================================*/

.aschauer-themen-card h3 {
    min-width: 0;
    min-height: 3.4rem;

    margin: 0 0 var(--space-2);

    color: var(--color-heading);

    font-size: 1.35rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;

    overflow-wrap: break-word;
    hyphens: auto;
}


/*==========================================================================
    Kartenbild
==========================================================================*/

.aschauer-themen-image {
    width: 100%;
    margin-bottom: var(--space-2);
    overflow: hidden;
}

.aschauer-themen-image img {
    display: block;

    width: 100%;
    height: 220px;

    object-fit: cover;
}


/*==========================================================================
    Karten-Text
==========================================================================*/

.aschauer-themen-card p {
    margin-bottom: var(--space-3);
}

.aschauer-themen-card .aschauer-highlight {
    display: inline-block;
    margin-bottom: .35rem;
}


/*==========================================================================
    Weiterleitung / Text-Link
==========================================================================*/

.aschauer-themen-card-link {
    display: inline-block;
    width: fit-content;

    margin-top: auto;

    color: var(--color-heading);

    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;

    transition: color var(--transition);
}

.aschauer-themen-card-link:hover {
    color: var(--color-accent);
}


/*--------------------------------------------------------------------------

    Tastaturfokus

--------------------------------------------------------------------------*/

.aschauer-themen-card-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}


/*==========================================================================
    Button innerhalb der Karte
==========================================================================*/

.aschauer-themen-card > .aschauer-button {
    margin-top: auto;
}


/*==========================================================================
    11 Grundsatz
==========================================================================*/

.aschauer-grundsatz {
    background: var(--color-surface);
}


/*==========================================================================
    12 Bilder
==========================================================================*/

.aschauer-image {
    overflow: hidden;
}

.aschauer-image img {
    display: block;

    width: 100%;
    height: 420px;

    object-fit: cover;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}


/*==========================================================================
    13 FAQ
==========================================================================*/

.aschauer-faq {
    margin-top: var(--space-4);
}

.aschauer-faq-item {
    padding-block: var(--space-3);

    border-bottom: 2px solid var(--color-border);
}

.aschauer-faq-item:first-child {
    border-top: 2px solid var(--color-border);
}

.aschauer-faq-item h3 {
    margin: 0 0 var(--space-2);

    font-size: var(--font-md);
    font-weight: var(--font-weight-semibold);

    letter-spacing: normal;
}

.aschauer-faq-item p {
    max-width: var(--content);

    margin: 0;
}


/*==========================================================================
    13.1 Beratungsthemen
==========================================================================*/

.aschauer-beratungsthemen-header {
    max-width: 880px;
    margin-inline: auto;
    margin-bottom: var(--space-4);
}

.aschauer-beratungsthemen-header h2 {
    margin-bottom: var(--space-2);
}

.aschauer-beratungsthemen-header .aschauer-intro {
    margin-bottom: 0;
}


/*---------------------------------------------------------------------------
    Themenbereich
---------------------------------------------------------------------------*/

.aschauer-beratungsthemen {
    max-width: 880px;
    margin-inline: auto;
}


/*---------------------------------------------------------------------------
    Einzelnes Beratungsthema
---------------------------------------------------------------------------*/

.aschauer-beratungsthema {
    padding-block: var(--space-4);
    border-bottom: 2px solid var(--color-border);
}


/*---------------------------------------------------------------------------
    Oberlinie nur beim ersten Thema
---------------------------------------------------------------------------*/

.aschauer-beratungsthema:first-child {
    border-top: 2px solid var(--color-border);
}


/*---------------------------------------------------------------------------
    Überschrift
---------------------------------------------------------------------------*/

.aschauer-beratungsthema h3 {
    margin: 0 0 var(--space-2);

    color: var(--color-heading);
    font-size: var(--font-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}


/*---------------------------------------------------------------------------
    Beschreibung
---------------------------------------------------------------------------*/

.aschauer-beratungsthema p {
    max-width: var(--content);
    margin: 0 0 var(--space-3);
}


/*---------------------------------------------------------------------------
    Button
---------------------------------------------------------------------------*/

.aschauer-beratungsthema .aschauer-button {
    margin-top: var(--space-1);
}

/*==========================================================================
    14 Kontakt
==========================================================================*/

.aschauer-kontakt {
    background: var(--color-surface);
}

.aschauer-kontakt-content {
    margin-inline: auto;

    padding-block: var(--space-4);

    text-align: center;
}


/*---------------------------------------------------------------------------
    Öffnungszeiten
---------------------------------------------------------------------------*/

.aschauer-opening-hours {
    display: block;

    width: fit-content;

    margin: var(--space-4) auto 0;

    padding-block: var(--space-3);

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);

    text-align: center;
}

.aschauer-opening-hours h3 {
    margin-bottom: var(--space-3);

    color: var(--color-heading);

    font-size: var(--font-md);
    font-weight: var(--font-weight-semibold);
}

.aschauer-opening-hours p {
    margin-bottom: var(--space-2);
}

.aschauer-opening-hours p:last-child {
    margin-bottom: 0;
}

.aschauer-kontakt-content > .aschauer-button {
    display: block;

    width: fit-content;

    margin: var(--space-4) auto 0;
}


/*==========================================================================
    15 Notice
==========================================================================*/

.aschauer-notice {
    margin: var(--space-4) auto;

    padding: var(--space-3) var(--space-4);

    border-top: 4px solid var(--color-border);
    border-bottom: 4px solid var(--color-border);

    background: var(--color-surface);

    text-align: center;
}

.aschauer-notice-title {
    margin: 0 0 var(--space-2);

    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);

    letter-spacing: .12em;
    text-transform: uppercase;
}

.aschauer-notice-text,
.aschauer-notice-return {
    margin: 0;
}

.aschauer-notice-return {
    margin-top: var(--space-2);
}


/*==========================================================================
    16 Buttons
==========================================================================*/

.aschauer-button {
    display: inline-block;

    padding: .5rem 1.35rem;

    background: var(--color-accent);
    color: var(--color-white);

    border: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);

    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.aschauer-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.aschauer-button:hover {
    background: var(--color-accent-hover);

    border-color: var(--color-accent-hover);

    color: var(--color-white);
}


/*==========================================================================
    17 Scroll-to-Top
==========================================================================*/

.aschauer-scroll-top {
    position: fixed;

    right: var(--space-3);
    bottom: var(--space-3);

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--color-surface);
    color: var(--color-accent);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-sm);

    cursor: pointer;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition);

    z-index: 900;
}

.aschauer-scroll-top:hover {
    background: var(--color-accent);

    color: var(--color-white);

    border-color: var(--color-accent);
}

.aschauer-scroll-top::before {
    content: "";

    width: 14px;
    height: 14px;

    border-top: 3px solid currentColor;
    border-left: 3px solid currentColor;

    transform: rotate(45deg);
}


/*==========================================================================
    18 Footer
==========================================================================*/

.aschauer-footer {
    margin-top: var(--space-5);

    padding-block: var(--space-3);

    border-top: 1px solid var(--color-border);
}

.aschauer-footer-content {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);
}

.aschauer-footer-content p {
    margin: 0;
}

.aschauer-footer-nav {
    display: flex;

    align-items: center;

    gap: var(--space-3);
}

.aschauer-footer-nav a {
    color: var(--color-text);

    transition: color var(--transition);
}

.aschauer-footer-nav a:hover {
    color: var(--color-accent);
}


/*==========================================================================
    19 Responsive
==========================================================================*/


/*==========================================================================
    Tablet
==========================================================================*/

@media (max-width: 1024px) {

    :root {
        --font-h1: 3rem;
        --font-h2: 2.1rem;

        --space-5: 4rem;
        --space-6: 5rem;
    }


    .aschauer-container {
        width: min(100% - 3rem, var(--container));
    }


    /*----------------------------------------------------------------------
        Zweispalten-Layout
    ----------------------------------------------------------------------*/

    .aschauer-grid-2 {
        grid-template-columns: 1fr;

        gap: var(--space-4);
    }

    .aschauer-grid-2--reverse {
        grid-template-columns: 1fr;
    }

    .aschauer-grid-2--reverse
    > .aschauer-content-block {
        order: 2;
    }

    .aschauer-grid-2--reverse
    > .aschauer-image {
        order: 1;
    }


    /*----------------------------------------------------------------------
        Themen
    ----------------------------------------------------------------------*/

    .aschauer-themen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aschauer-themen-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aschauer-themen-image img {
        height: 220px;
    }



    /*----------------------------------------------------------------------
        Hero
    ----------------------------------------------------------------------*/

    .aschauer-hero-photo {
        height: 55vh;
    }

    .aschauer-hero-content {
        padding-top: var(--space-3);
        padding-bottom: var(--space-4);
    }


    /*----------------------------------------------------------------------
        Bilder
    ----------------------------------------------------------------------*/

    .aschauer-image img {
        height: 360px;
    }

}


/*==========================================================================
    Smartphone
==========================================================================*/

@media (max-width: 700px) {

    :root {
        --font-h1: 2.2rem;
        --font-h2: 1.8rem;
        --font-h3: 1.4rem;

        --space-4: 2rem;
        --space-5: 3rem;
        --space-6: 3.5rem;
    }


    body {
        font-size: 1rem;
    }


    .aschauer-container {
        width: calc(100% - 2rem);
    }


    /*----------------------------------------------------------------------
        Header
    ----------------------------------------------------------------------*/

    .aschauer-header > .aschauer-container {
        min-height: var(--header-height);

        padding-block: .75rem;
    }

    .aschauer-logo-image {
        width: 160px;
    }


    /*----------------------------------------------------------------------
        Navigation
    ----------------------------------------------------------------------*/

    .aschauer-nav-list {
        gap: 0;
    }


    /*----------------------------------------------------------------------
        Hero
    ----------------------------------------------------------------------*/

    .aschauer-hero-photo {
        height: 45vh;
    }

    .aschauer-hero-content {
        text-align: left;
    }

    .aschauer-hero-content h1 {
        margin-bottom: var(--space-2);
    }

    .aschauer-hero-content p {
        font-size: var(--font-md);
    }


    /*----------------------------------------------------------------------
        Sektionen
    ----------------------------------------------------------------------*/

    .aschauer-section {
        padding-bottom: var(--space-5);
    }


    /*----------------------------------------------------------------------
        Themen
    ----------------------------------------------------------------------*/

    .aschauer-themen-grid,
    .aschauer-themen-grid--3 {
        grid-template-columns: 1fr;
    }

    .aschauer-themen-card {
        padding: var(--space-3);
    }

    /*
        Auf dem Smartphone braucht die Überschrift keine feste
        Mindesthöhe mehr, da die Karten ohnehin untereinander stehen.
    */

    .aschauer-themen-card h3 {
        min-height: 0;
    }

    .aschauer-themen-image img {
        height: 260px;
    }

    .aschauer-themen-card .aschauer-button {
        width: 100%;
        text-align: center;
    }

    /*----------------------------------------------------------------------
        Allgemeine Bilder
    ----------------------------------------------------------------------*/

    .aschauer-image img {
        height: 260px;
    }


    /*----------------------------------------------------------------------
        Buttons
    ----------------------------------------------------------------------*/

    .aschauer-button {
        width: 100%;

        text-align: center;
    }

    .aschauer-button-group {
        flex-direction: column;
    }

    .aschauer-button-group .aschauer-button {
        width: 100%;
    }


    /*----------------------------------------------------------------------
        Footer
    ----------------------------------------------------------------------*/

    .aschauer-footer-content {
        flex-direction: column;

        text-align: center;
    }

    .aschauer-footer-nav {
        justify-content: center;

        flex-wrap: wrap;
    }


    /*----------------------------------------------------------------------
        Notice
    ----------------------------------------------------------------------*/

    .aschauer-notice {
        padding-inline: var(--space-2);
    }

}


/*==========================================================================
    Kleine Smartphones
==========================================================================*/

@media (max-width: 400px) {

    :root {
        --font-h1: 2rem;
        --font-h2: 1.6rem;
    }


    .aschauer-logo-image {
        width: 140px;
    }


    .aschauer-hero-photo {
        height: 35vh;
    }


    .aschauer-themen-image img {
        height: 220px;
    }

}