@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root {
        --clr-pure-white: #f4f4f4;
        --clr-ocean-blue: #024788;
        --clr-soft-clay: #c59b8c;
        --clr-muted-gold: hsl(39, 62%, 57%);
        
        --clr-creamy-beige: hsl(35.7, 49.5%, 81.4%);
   
    --clr-dark-petrol: hsla(212, 15%, 17%, 0.8);
        --clr-muted-steel: #7A8A99;  

    
    --clr-soft-grey-green: #fafdfc;     /* Soft Grey-Green (Hintergrund) */
    --clr-soft-black: #1A1C1E;          /* Soft Black (Text) */
    --clr-vanilla: #fbf8ef;             /* Vanilla (Sekundärer Text) */
    --clr-md-blue: #1d2d72;
    --clr-transformative-teal: #005F69; /* Transformative Teal (Hauptfarbe) */
    --clr-warm-sand: #D9CBB6;           /* Warm Sand (Akzentfarbe) */
    --clr-darker-teal: #00424A;         /* Dunkleres Teal für Hover */
    --clr-muted-grey: #5A6A70;          /* Muted Grey (Nebentext) */
    --clr-dark-bronze: #4e4746;         /* Dark Bronze (Dunkleres Sekundär) */
    --clr-soft-shadow: 0 10px 30px -5px rgba(0, 95, 105, 0.1); /* Haptischer Schatten */


    --clr-primary-text: var(--clr-muted-grey);
    --clr-secondary-text: var(--clr-vanilla);
    --clr-accent: var(--clr-warm-sand);
    --clr-button-face: var(--clr-md-blue);
    --clr-button-text: var(--clr-warm-sand);
    --clr-primary-heading: var(--clr-transformative-teal);
    --clr-secondary-heading: var(--clr-soft-black);
    --clr-subheading: var(--clr-soft-black);
       
    --clr-bg-primary: var(--clr-vanilla); 
    --clr-bg-secondary: var(--clr-soft-grey-green);
    --clr-bg-secondary-80: var(--clr-dark-bronze);
    
    --clr-bg-accent: hsl(211, 15%, 30%);   
    --clr-cards-bg: #f2f1ec; 
    
    --ff-primary: "Open Sans", system-ui, sans-serif, Arial, Helvetica;

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    --fw-light: 200;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;

    --fs-200: 0.5rem;
    --fs-300: 0.75rem;
    --fs-400: 1.0rem;
    --fs-500: 1.25rem;
    --fs-600: 1.75rem;
    --fs-700: 2.0rem;
    --fs-900: 2.5rem;
    --fs-xl : clamp(3.5rem, 12vw + 1rem, 10rem);

    --fs-body: var(--fs-300);
    --fs-primary-heading: var(--fs-400);
    --fs-secondary-heading: var(--fs-500);
    --fs-subheading: var(--fs-400);
    --fs-button: var(--fs-400);
}

@media (min-width: 30em) {
    :root {
        --fs-body: var(--fs-400);
        --fs-primary-heading: var(--fs-900);
        --fs-secondary-heading: var(--fs-600);
        --fs-subheading: var(--fs-500);
        --fs-button: var(--fs-500);
    }
}

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

* {
  margin: 0;
  padding: 0;
  hyphens: manual;
  font: inherit;
  user-select: none; 
  -webkit-user-select: none;
}

html:focus-within {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: 1.6; 

    color: var(--clr-primary-text);
    background-image: linear-gradient(135deg, var(--clr-bg-primary), 60deg var(--clr-bg-secondary));
    scroll-snap-type: y mandatory;  
    text-rendering: optimizeSpeed;        
}

h1 {
    line-height: 1.2;
    font-size: var(--fs-primary-heading);
    font-weight: var(--fw-bold);
}

h2 {
    font-size: var(--fs-secondary-heading);
    font-weight: var(--fw-bold);
    margin-bottom: 0.5em;
}

h3 {
    font-size: var(--fs-subheading);
    font-weight: var(--fw-medium);
    margin-bottom: 0.5em;
}

h4 {
    color: var(--clr-subheading);
    font-size: var(--fs-subheading);
    font-weight: var(--fw-medium);
    font-style: italic;
    margin: 1.5em 0 0.5em;
}

p {
    display: block;
    text-align: justify;
    text-justify: inter-word;
}

ul {
    margin-inline-start: 1em;
    margin: 2em;
}

img, picture, svg {
  display: block;
  max-width: 100%;
  box-shadow: var(--clr-soft-shadow);
  margin: auto;
}

section {
    padding: 3rem 10%;
    margin-inline: auto;
    scroll-snap-align: start;

    &.alternate-bg {
        background-color: #f0f0f0;
    }

    h2 {
        color: var(--clr-primary-heading);
    }
}

hr {
    width: 50%;
    margin: 0 auto;
    color: #ffffff;
}

.container {
    max-width: 70rem;
    margin: 0 auto;
    
    & > h2 {
        margin-bottom: 1rem;
    }

    & > p:first-of-type {
        text-box-trim: trim-both;

        &::before {
            font-family: sans-serif;
            content: open-quote;         
            font-size: 6em;
            line-height: 1;
            opacity: 0.3;

            float: left; 
            margin-top: -0.75em;
    
            /* display: inline-block; */
            /* transform: translateY(-7.25rem);
            position: absolute; */
        }     
    }

    & > p:last-of-type {
        &::after {
            font-family: sans-serif;
            content: close-quote;
            font-size: 1.5rem;
            line-height: 0;
            opacity: 0.6;
        }
    }
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.full-width {
    max-width: 100vw;
}

.card {
    --border-radius: 1rem;

    background-color: var(--clr-cards-bg);
    color: var(--clr-primary-text);
    font-weight: var(--fw-regular);
    padding: 2em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-blend-mode: soft-light;
    border: 3px solid  var(--clr-muted-grey);
    border-radius: var(--border-radius);
    text-align: center;

    h3 {
        margin: 1rem 0;
    }

    [class^=icon-] {
        color: var(--clr-muted-steel);
        font-size: var(--fs-xl);
    }

    transition: all 1.2s ease-out;

    &:hover {
        border-color: var(--clr-accent); 
        box-shadow: var(--clr-soft-shadow);
    }

    &:hover [class^=icon-] {
        color: var(--clr-accent);
        transition: all 1.2s ease-out;
    }
}

.card-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--clr-transformative-teal);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    &::after {
        content: ' →';
    }   
    &:hover {
        text-decoration: underline;
        font-style: italic;
        box-shadow: var(--clr-soft-shadow);
    }
}

.cta {
    display: inline-block;
    background-color: var(--clr-button-face);
    color: var(--clr-button-text);
    padding: 0.6rem;
    margin-top: 1rem;
    border: 1px solid var(--clr-button-face);
    border-radius: 3px;
    &:hover {
        color: var(--clr-accent);
        font-style: italic;
    }
    &:active, :visited {
        color: var(--clr-button-text);
    }
}

#intro {
    height: 100svh;
    padding: 3rem;
    background-image: url('images/justicia_3.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;

    color: var(--clr-secondary-text);

    div {
        padding: 1em;
        max-width: 40rem;
        backdrop-filter: blur(4px);
    }
    
    #logo {
        --logo-clr: var(--clr-accent);

        opacity: 0;
        transform: scaleY(0.2) translateX(-100vw);
        transition:all 0.8s ease-out;
        transition-delay: 0.5s;
        width: -webkit-fill-available;
        width: -moz-available;
        width: fill-available;

        path { 
            fill: var(--logo-clr); 
            fill-opacity: 1; 
            stroke: var(--logo-clr); 
            stroke-opacity: 1; 
            stroke-width:0.299415; 
        }

        .show & {
            opacity: 1;
            transform: scaleY(1) translateX(0);
        }
    }

    h1, h3, p, a {
        opacity: 0;
        transition: all 1.2s ease-in-out;
        .show & {
            opacity: 1;
        }
    }

    h1 { transition-delay: 1.5s; }
    h3 { transition-delay: 2.5s; }
    p, a { transition-delay: 2.5s; }
}

.key_content {
    text-align: left;
}

#verkehrsrecht { background-image: url('images/accident-icon.svg'); } 
#strafrecht { background-image: url('images/handcuffs-icon.svg'); }
#zivilrecht { background-image:  url('images/scale-icon.svg'); }

footer {
    display: flex;
    justify-content: space-between;
    
    padding: 1em 2em;
    font-size: var(--fs-400);
    color: var(--clr-accent);
    text-transform: uppercase;
    background-color: black;
    a {
        color: var(--clr-accent);
    }
    :last-child {
        word-spacing: 0.8rem;
    }
}

a {
    color: inherit;
    font-style: normal;
    text-decoration: none;            
    &:hover {
        text-decoration: underline;
    }
}

address {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* using grid >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.grid {
    --min-col-size:400px;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col-size),100%), 1fr));
    grid-template-rows: auto 1fr;
    gap: 2em;
    align-items: start;
}

.flex {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.2em;
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  */

.openinghours {
    max-width: 20em;
    & > p {
        display: flex;
        justify-content: space-between;
    }
}

/* dialogs & modals >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

dialog {
    align-self: center;
    justify-self: center;
    border: none;
    border-radius: 4px;
    box-shadow: 2px 2px 2px rgb(0 0 0 / 25%);
    padding: 2em;
    max-width: 80ch;
    opacity: 0;
    transform: scaleY(0);
    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out,
        overlay 0.7s ease-out allow-discrete,
        display 0.7s ease-out allow-discrete;

    &:open {
        opacity: 1;
        transform: scaleY(1);
        &::backdrop {
            background-color: rgb(0 0 0 / 40%);
            backdrop-filter: blur(2px) grayscale(100%);
        }
    }

    &::backdrop {
        background-color: transparent;
        backdrop-filter: blur(2px) grayscale(100%);
        opacity: 0.3;
        transition:
            display 0.4s allow-discrete,
            overlay 0.7s allow-discrete,
            background-color 0.7s;
    }
}

@starting-style {
    dialog:open {
        opacity: 0;
        transform: scaleY(0);
    }
    dialog:open::backdrop {
        background-color: transparent;
        backdrop-filter: blur(2px) grayscale(100%);
    }
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */